CSS FILE
<div class=" -toolbar ">
<p>
<mat-toolbar>
<h4>Offer Mapping</h4>
<div class="row align-right col-md-offset-7 col-md-1 ">
<mat-form-field class="button-spacing">
<mat-select placeholder="select">
</mat-select>
</mat-form-field>
<button mat-raised-button (click)="campaignPrioritise()" [disabled] class="button-spacing">
Prioritize
</button>
<button mat-icon-button color="primary" (click)="createNewCampaign()">
<mat-icon aria-label="Example icon-button with a heart icon">add_circle_outline</mat-icon>
</button>
<mat-slide-toggle *ngIf= "let element" class="material-icons color_green" matTooltip="Prioritize"
[checked]="element.priority" (change)="campaignPrioritise(element)"></mat-slide-toggle>
</div>
</mat-toolbar>
</p>
</div>Angular File
import { Component } from '@angular/core';
import { MatTableDataSource } from '@angular/material';
/**
* @title Basic use of `<table mat-table>`
*/
@Component({
selector: 'table-basic-example',
styleUrls: ['table-basic-example.css'],
templateUrl: 'table-basic-example.html',
})
export class TableBasicExample {
timeSelection1 = '';
timeSelection2 = '';
selected: any[] = [];
selected1 : any[] = [];
onToggleChange(element){
let priority = false;
element.priority = !element.priority;
}
}
When I switch the toggle, the priority variable toggles between true and false.
How can I achieve this in the Mat Toolbar? I tried writing some code but the slide toggle is not appearing in the Mat Toolbar!
When I press the toggle switch, the priority switch changes to true, and when I slide it back, the toggle switch becomes false.
Here is my StackBlitz Link - https://stackblitz.com/edit/toggle12345677709-gfj1?file=main.ts