#

 

Angular Beispiel Code

 

Angular Code-Beispiel:

*ngIf Textbereiche anzeigen

Typescript event auf Button

 

Das beispiel zeigt, wie man mit *ngIf Bereiche anzeigt oder ausblendet

Die folgenden Bereiche werden je nach Wert von der Variable Input_disabled eingeblendet oder ausgeblendet

 

Mit dem Ausrufezeichen wird ein Bereich angezeigt, wenn dern Wert=falsch ist

*ngIf=!Nichtwert

<p *ngIf="!Input_disabled">this is: p *ngIf="!Input_disabled"</p>

       

 

<p *ngIf="Input_disabled">this is p *ngIf="Input_disabled"</p>

 

 

 

 

 

Das folgende Beispiel macht folgendes:

Beim Klick auf den Toggle Button wird die Variable TRUE und FALSE geschaltet

 

Button zum Disable in Angular

<button class="btn btn-primary" (click)="onButtonClickDisable()">Disable Input</button>

 

 

  onButtonClickDisable(){

    this.Input_disabled=true;

  }

 

 

Toggle

<button class="btn btn-primary" (click)="onClickToggle()">Toggle Disable</button>

 

 

  onClickToggle()

  {

    this.Input_disabled=!this.Input_disabled;

  }

 

 

 

.html Datei Code Angular

Datei: src\app\components\liste\liste.component.html

 

<p>Eingabe ngModel 2Way ngIf:<br>

     <input type="text" class="forms-control" 

     [(ngModel)]="ListName"

       disabled={{Input_disabled}}   ></p> 

 

Ausgabe={{ ListName }}

 

<button class="btn btn-primary" (click)="onButtonClickDisable()">Disable Input</button>

 

<p>value of disabled={{Input_disabled}}</p>

<p *ngIf="!Input_disabled">p *ngIf="!Input_disabled"</p>

<p *ngIf="Input_disabled">p *ngIf="Input_disabled"</p>

 

<button class="btn btn-primary" (click)="onClickToggle()">Toggle Disable</button>

 

 

 

Datei src\app\components\liste\liste.component.ts

Typescript Code

 

import { ComponentOnInit } from '@angular/core';

 

@Component({

  selector: 'app-liste',

  templateUrl: './liste.component.html',

  styleUrls: ['./liste.component.css']

})

export class ListeComponent implements OnInit {

  

  //< Angular Data >

  ListNamestring = "Data Excample";

  Input_disabled : boolean = false;

  //</ Angular Data >

 

  constructor() { }

 

  ngOnInit(): void {

  }

 

  onButtonClickDisable(){

    this.Input_disabled=true;

  }

  onClickToggle()

  {

    this.Input_disabled=!this.Input_disabled;

  }

 

}

 

 

 

Mobile

.