动态更改离子模态的导航栏颜色

Question

I wanna change my navbar color based on event colour. So, every time I click on event, it opens, modal with colour = primary. However, I wanna change it to a specific for this event. Can I do so in Ionic at all?

  <ion-navbar color="primary">
    <ion-buttons start>
      <button ion-button icon-only (click)="cancel()">
        <ion-icon name="close"></ion-icon>
      </button>
    </ion-buttons>
    <ion-title>Activity Details</ion-title>
  </ion-navbar> 

I tried to enter some variables inside color, but they are ignored by the ionic.

<ion-navbar class="toolbar toolbar-md toolbar-md-#f53d3d" ng-reflect-color="#f53d3d"><div class="toolbar-background toolbar-background-md" ng-reflect-klass="toolbar-background" ng-reflect-ng-class="toolbar-background-md"></div><button class="back-button bar-button bar-button-md back-button-md bar-button-default bar-button-default-md" ion-button="bar-button" ng-reflect-klass="back-button" ng-reflect-ng-class="back-button-md"><span class="button-inner"><ion-icon class="back-button-icon icon icon-md back-button-icon-md ion-md-arrow-back" role="img" ng-reflect-klass="back-button-icon" ng-reflect-ng-class="back-button-icon-md" aria-label="arrow back" ng-reflect-name="md-arrow-back"></ion-icon><span class="back-button-text back-button-text-md" ng-reflect-klass="back-button-text" ng-reflect-ng-class="back-button-text-md"></span></span><div class="button-effect"></div></button><ion-buttons start="" class="bar-buttons bar-buttons-md">

Answer 1

Add this will change your color at run time while your screen will load

<ion-navbar [color]="navbar_color">
    <ion-buttons start>
      <button ion-button icon-only (click)="cancel()">
        <ion-icon name="close"></ion-icon>
      </button>
    </ion-buttons>
    <ion-title>Activity Details</ion-title>
  </ion-navbar> 

And add this in .ts file

navbar_color: string;
  ionViewDidLoad() {

    this.navbar_color="<YourColor>";

  }

Hope this will work for dynamic color in navbar.