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 { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-liste',
templateUrl: './liste.component.html',
styleUrls: ['./liste.component.css']
})
export class ListeComponent implements OnInit {
//< Angular Data >
ListName: string = "Data Excample";
Input_disabled : boolean = false;
//</ Angular Data >
constructor() { }
ngOnInit(): void {
}
onButtonClickDisable(){
this.Input_disabled=true;
}
onClickToggle()
{
this.Input_disabled=!this.Input_disabled;
}
}
|