how to hide/show html tag in type script in Angular component-CodePudding

I have created a form in angular Html component, which is used to add users and update them using dialog module. If the user clicks for updating, I want to hide password input in HTML.

    <mat-form-field appearance="outline">
        <mat-label>Mot de passe</mat-label>
        <input formControlName="password" matInput/>  
    </mat-form-field>

CodePudding user response：

You can use *ngIf directive to show/hide content. Basically, it accepts an expression. When the expression evaluates to true it shows the DOM, otherwise, it removes it from DOM. Over here you can control the behavior using isUpdating boolean.

<mat-form-field appearance="outline" *ngIf="isUpdating">
    <mat-label>Mot de passe</mat-label>
    <input formControlName="password" matInput/>  
</mat-form-field>

CodePudding user response：

component.html

<ng-container *ngIf='!isUpdating'>
    <mat-form-field appearance="outline">
        <mat-label>Mot de passe</mat-label>
        <input formControlName="password" matInput/>  
    </mat-form-field>
</ng-container>

component.ts

export class Component {
    isUpdating = false;

    onUpdate() {
        this.isUpdating = true;
    }
}

You can add condition on Password Input Whenever isUpdating will set to true then password input will removed from DOM and If isUpdating will set to false then Password input will add in DOM automatically.