CODEWITHSUNDEEP
htmlangulartypescriptdisabled-inputngx-chips
user9436741
user9436741

Reputation:

how to disable matchip in angular

So I have Tags component and I imported that component in my Chart-details component. In my Chart Details component I have a checkbox that will disable all the input box, drop down box, buttons that are located inside chart-details page but some reason my imported tags component is not disabling when I click the checkbox. Any suggestion or help on how to fix this so that a user cannot add or remove tags when the checkbox is clicked will be really appreciated.

Chart Details Component. HTML

//Check box to disable all the input, drop down, buttons
    <mat-checkbox *ngIf="chart && workspace" color="primary" [disabled]="this.workspace.type === WorkspaceType.user"
        [(ngModel)]="chart.isPublished" (ngModelChange)="publishChange($event)">Published</mat-checkbox>

//Example Button
   <button color="primary" mat-flat-button (click)="saveClick()" [disabled]="this.chart.isPublished">Save</button>

// Imported Tags Component
        <mc-tags [_normalTags]="chart.tags" [removable]="true" [selectable]="true"
        (added)="tagAdded($event)" (removed)="tagRemoved($event)" [disabled]="this.chart.isPublished" >
        </mc-tags>

I have added [disabled]="this.chart.isPublished" but I got an error saying "Can't bind to 'disabled' since it isn't a known property of 'mc-tags'. ". Also I tried (disabled) but still not working and user can still add or remove tags even though checkbox is checked.

Tags Component.HTML

        <mat-chip-list #chipList [disabled]="true">
            <mat-chip *ngFor="let chip of normalTags" [selectable]="selectable" 
            [removable]="removable"
                (removed)="removeTags(chip)">
                {{chip.tag}}
            </mat-chip>

            <input matInput #input [(ngModel)]="tagIn" [formControl]="tagCtrl2" 
            [matAutocomplete]="auto" />
        </mat-chip-list>

Right now I have to do [disabled]="true" on mat-chip-list in Tags component.html so that user can't add or remove it. I don't want to hard code this and want to control this using Chart Detail Component Checkbox.

enter image description here

It's not gonna run but I've attached the whole code for these two component over here https://stackblitz.com/edit/angular-ivy-wwfcai . thanks

Upvotes: 3

Views: 8997

Answers (1)

Naveed Aheer
Naveed Aheer

Reputation: 1825

You can use Input to pass true or false then you can disable tags.

OR

//Check box to disable all the input, drop down, buttons

    <mat-checkbox *ngIf="chart && workspace" color="primary" [disabled]="this.workspace.type === WorkspaceType.user"
        [(ngModel)]="chart.isPublished" (ngModelChange)="publishChange($event)">Published</mat-checkbox>

//Example Button
   <button color="primary" mat-flat-button (click)="saveClick()" [disabled]="this.chart.isPublished">Save</button>

// Imported Tags Component

You can use pointer-events:none; to disable it. You can also apply conditional CSS

<div style="pointer-events:none;">
        <mc-tags [_normalTags]="chart.tags" [removable]="true" [selectable]="true"
        (added)="tagAdded($event)" (removed)="tagRemoved($event)" [disabled]="this.chart.isPublished" >
    </ div>
        </mc-tags>
enter code here

Upvotes: 0

Related Questions