Readdy Write  
0,00 €
Your View Money
Views: Count
Self 20% 0
Your Content 60% 0
Users by Links 0
u1*(Content+Views) 10% 0
Follow-Follower 0
s2*(Income) 5% 0

Count
Followers 0
Login Register as User
Log in Register

Angular Beispiel Code ngIf, event und toggle

22.12.2020 (👁4537)

 

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;

  }

}