Last Updated
Viewed 16 Times
           

I developed a timeline with 4 levels. When I click on each of the levels, the timeline is filled with green color. Would it be possible to change this color in different types of states?

In state 4 I have the circle and the lines green, how can I change this color in the remaining 3?

That is, in 3 I want yellow color, in 2 green color 3 in 1 red color.

In the image, I leave an example of what I want

Can anyone help me?

Image

My code stackblitz

HTML

<ul class="timeline" id="timeline" >
    <li class="li" [ngClass]="priority['isComplete']?'complete':''" *ngFor="let priority of Priorities; let  p = index;">
        <div class="timestamp">
        </div>
        <div class="status">    
                <span class="circle" (click)="changeTimeline(priority.id)">{{priority.id}}</span>
            <h4 class="timelineh4">{{priority.text}}</h4>
        </div>
    </li>
</ul>

Component

public Priorities:Array<Object> = [
    {id: 4, text: 'Low',isComplete:true},
    {id: 3, text: 'Mid Low',isComplete:true},
    {id: 2, text: 'Mid',isComplete:true},
    {id: 1, text: 'High',isComplete:true},
];
  public changeTimeline(id) {
    this.Priorities.forEach(p => {
        p['isComplete'] = p['id'] < id? false:true;
    })
  }

I am a newbie to Angular2 and I want to know how to change the CSS of an icon conditionally based on the values.

In HTML:

<li><i class="fa fa-check" [style.color]="'switch(types)'"></i>{{ types }}</li>

types contains a lot of integers ranges from 1-3.

In ts:

switch(p) {
    if(p==0) {...} //return color red
    if(p==1) {...} //return color blue
    if(p==2) {...} //return color green
}

This doesn't seem to work for me.

I have change iconic button color when clicking on it, default iconic button color is primary color when I clicked on the iconic button it should change primary color to red color. That working fine for me, now after clicking the hidden buttons will display one is cancel button and other is save button up to here it is working fine now, when I clicked cancel button the button which is red color should change to primary but cancel button is closing and color of the iconic button is not changing

<kendo-grid-command-column headerClass="data-list-header-cell" title="Delete" width="5" filterable="false">
    <ng-template kendoGridCellTemplate let-site>
      <button mat-icon-button color="primary" (click)="onDelete(data)" [ngClass]="{'selectedRemoveButton':data.isClicked}">
        <mat-icon>remove_circle</mat-icon>
      </button>
      
      // these are icon button if clicked on this button it will change color and also show 2 buttons cancel and save.
      
      <ng-container *ngIf="showButtons">
    <span class="rightButtons">
      <button class="mat-button menu-button" (click)="cancel()">
        <mat-icon>block</mat-icon> CANCEL
      </button>
      <button class="mat-button primary-button" (click)=" save()">
        SAVE
      </button>
    </span>
  </ng-container>
.selectedRemoveButton {
  color: red
}
 onDelete(data: any) {
    if (data.isClicked) {
      this.dataList.push(data);
    }
    data.isClicked = !data.isClicked;
    this.showButtons = !this.showButtons;
    console.log(data.Id);
  }
  
  //these is where i am first clicking on button when i click on these button color will change to red
  
  cancel(): void {
    this.showButtons = false;
  }
  //if presse on cancel button is disappearing but color have to change red to primary
  save() {
   
      this.Service.datalist(data.Id).subscribe(
          data => {
            this.dataList = data;
            console.log(data);
          });
    
  }
  //this is save button 

please help me in this

How can I change the background color of the toast message?

I have tried this: But no luck. Is that due to the shadow DOM effect?

variable.scss

--background:red;

global.scss

ion-toast>.toast-wrapper {
    background-color: red !important;
}

.ts

  async showErrorToast(data: string) {
    const toast = await this.toastCtrl.create({
      message: data,
      duration: 3000000,
      position: 'bottom'
    });
    toast.present();
  }

enter image description here

Similar Question 5 (1 solutions) : Responsive and customize Timeline

Similar Question 7 (2 solutions) : how to color button and keep state?

Similar Question 9 (2 solutions) : change <li> style by click

cc