Angular data binding is een belangrijk onderwerp als het gaat om het doorgeven van gegevens tussen componenten aan het DOM. In dit artikel ga ik in op eenrichtings- en tweerichtingsdata binding.
Dit is een unidirectionele data binding methode. Als we eenrichtingsbinding gebruiken, kunnen we alleen gegevens binden van component naar view of van view naar component. Er zijn veel verschillende manieren waarop we one-way data binding kunnen gebruiken in onze Angular-toepassing.
- Interpolatie Binding
Interpolatie is een veelgebruikte methode die we gebruiken om gegevens te binden in Angular en deze verwijst naar het binden van waarden in UI-elementen.
Zoals in het voorbeeld wordt getoond, kunnen we de gebonden variabele in HTML-elementen gebruiken door gekrulde haakjes toe te voegen, zoals {{Name}}. Deze methode wordt meestal gebruikt wanneer we twee waarden moeten samenvoegen. vb : {{FirstName}} {{Last Name}}.
2. Property Binding.
Dit is een andere veel gebruikte methode om gegevens te binden en met deze methode kunnen we waarden van componenten binden aan de DOM-eigenschappen van de HTML-elementen.
Als we in dergelijke situaties Interpolation gebruiken, wordt de knop altijd uitgeschakeld en wordt de waarde van de variabele genegeerd.
3. Attribute Binding
Attribute binding wordt gebruikt om een attribuut-eigenschap van een weergave-element te binden. Stel dat we een aantal kolommen in een tabel moeten samenvoegen met behulp van een colspan-attribuut.
Als we waardevariabele gebruiken zoals in de opmerking wordt getoond of als een eigenschap binden, zal dit een fout opleveren. Daarom moeten we een attribuutbinding gebruiken die begint met attr en wordt gevolgd door een punt en de naam van het attribuut.
4. Klassebinding
De syntaxis van klassebinding lijkt sterk op die van attribuutbinding en deze methode wordt gebruikt om een klasse-eigenschap van een weergave-element in te stellen. Met behulp van deze bindingsmethode kunnen we CSS-klassen voorwaardelijk aan een element toevoegen, waardoor dynamisch vormgegeven elementen worden gecreëerd.
De CSS-eigenschap rood wordt alleen toegepast als de cijfers van de student lager zijn dan 40. Net als bij de attribuutbinding begint de klassebinding met het trefwoord klasse, gevolgd door een punt en de naam van de klasse.
5. Style Binding
Deze methode lijkt ook erg op de vorige twee methoden en we kunnen Style Binding instellen om inline css stijlen in te stellen.
Two-Way Data Binding
Two-way data binding is het tot stand brengen van een bi-directionele verbinding tussen View en component waardoor gebruikers gegevens kunnen uitwisselen op beide manieren. Bidirectionele gegevensbinding kan eenvoudig worden bereikt door gebruik te maken van (ngModel).
Zorg ervoor dat u FormsModule importeert van @angular/forms in het bestand app.component.ts als u gebruikmaakt van (ngModel).