Konzept von Angular 2 ng-disabled

Muhammad Adil 20 März 2023

Angular Angular Directive

Angular 2 ng-disabled ist eine Direktive, die es Entwicklern ermöglicht, ein Formularsteuerelement zu deaktivieren. Es kann verwendet werden, um zu verhindern, dass der Benutzer Daten in ein Formularfeld eingibt, oder es kann verwendet werden, um ein Eingabefeld zu deaktivieren, das mit Daten vorausgefüllt ist.

Dieses Attribut kann jedem HTML-Element hinzugefügt werden, einschließlich Eingabe-, Schaltflächen-, Auswahl- und Textbereichselementen.

Die Direktive ng-disabled ändert das Erscheinungsbild des Elements nicht, verhindert jedoch eine Benutzerinteraktion damit. Es kann in verschiedenen Szenarien angewendet werden, z. B. zum Deaktivieren eines Eingabefelds, wenn ein Kontrollkästchen deaktiviert ist, oder zum Deaktivieren einer Schaltfläche, wenn sich der Benutzer nicht angemeldet hat.

Schritte zur Verwendung der Angular 2 `ng-disabled`-Direktive

Der einfachste Weg, ng-disabled zu verwenden, besteht darin, die Eigenschaft disabled der Klasse Component auf true zu setzen. Dadurch wird die Komponente deaktiviert und nicht im DOM gerendert.

Dieser Artikel führt Sie durch die Schritte zur Verwendung von Angular 2 ng-disabled.

Importieren Sie das Modul

Importieren Sie das ng-disabled-Modul in Ihre app.module.ts-Datei.

Fügen Sie den TypeScript-Code hinzu

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  public onClick(): void {
	console.log('> click');
  }

  public onBlockClick(): void {
	console.log('> stopped');
  }
}

Deaktivieren Sie Komponenten in Ihrer Anwendungslogik

Deaktivieren Sie Komponenten in Ihrer Anwendungslogik, indem Sie ng-disabled als Eingabeparameter hinzufügen und auf true setzen, wie folgt:
```
<h2>Example of Angular 2 ng-disabled</h2>
<div
	 (click)="onBlockClick()">
  <button [disabled]="true"
		  (click)="onClick()">
	Home
  </button>
</div>
```
Hier haben wir den Home-Button deaktiviert. Sie können die Schaltfläche sehen, aber Sie können nicht damit interagieren.

So funktioniert ng-disabled in Angular 2.

Klicken Sie hier, um die Live-Demonstration des Codes wie oben erwähnt zu überprüfen.

Autor: Muhammad Adil

Muhammad Adil is a seasoned programmer and writer who has experience in various fields. He has been programming for over 5 years and have always loved the thrill of solving complex problems. He has skilled in PHP, Python, C++, Java, JavaScript, Ruby on Rails, AngularJS, ReactJS, HTML5 and CSS3. He enjoys putting his experience and knowledge into words.

Facebook

Schritte zur Verwendung der Angular 2 ng-disabled-Direktive

Importieren Sie das Modul

Fügen Sie den TypeScript-Code hinzu

Deaktivieren Sie Komponenten in Ihrer Anwendungslogik

Verwandter Artikel - Angular Directive

Schritte zur Verwendung der Angular 2 `ng-disabled`-Direktive