Angular databindning är ett viktigt ämne när det gäller att överföra data mellan komponenter till DOM. I den här artikeln kommer jag att diskutera envägs- och tvåvägsdatabindning.
Det här är en enkelriktad databindningsmetod. Om vi använder enkelriktad databindning kan vi bara binda data från komponent till vy eller från vy till komponent. Det finns många olika sätt som vi kan använda envägsdatabindning i vår Angular-applikation.
- Interpoleringsbindning
Interpolering är en mycket vanlig metod som vi använder för att binda data i Angular och detta hänvisar till att binda värden i UI-element.
Som visas i om exempel kan vi använda den bundna variabeln i HTML-element genom att lägga till krullparenteser som {{Name}}. Den här metoden används främst när vi behöver sammanfoga två värden. t.ex.: {{FirstName}} {{Förnamn}}.
2. Egenskapsbindning.
Detta är en annan allmänt använd metod för att binda data och med denna metod kan vi binda värden från komponenter till DOM-egenskaperna i HTML-elementen.
Om vi använder Interpolation i sådana situationer kommer knappen alltid att vara inaktiverad utan hänsyn till variabelns värde.
3. Attributbindning
Attributbindning används för att binda en attributegenskap för ett visningselement. Låt oss ta ett scenario där vi behöver slå ihop några kolumner i en tabell med hjälp av ett colspan-attribut.
Om vi använder värdevariabel som visas i kommentaren eller som en egenskapsbindning kommer det att resultera i ett fel. Därför måste vi använda en attributbindning som börjar med attr och följs av en punkt och namnet på attributet.
4. Klassbindning
Syntaxen för klassbindning är mycket lik attributbindning och den här metoden används för att ställa in en klassegenskap för ett visningselement. Med hjälp av den här bindningsmetoden kan vi lägga till CSS-klasser villkorligt till ett element och skapa dynamiskt stylade element.
CSS-egenskapen röd kommer endast att tillämpas när studentens betyg är lägre än 40. Liksom attributbindning börjar klassbindning med nyckelordet class följt av en punkt och ett klassnamn.
5. Style Binding
Denna metod är också mycket lik de två föregående metoderna och vi kan ställa in Style Binding för att ställa inline css-stilar.
Tvåvägs databindning
Tvåvägs databindning innebär att man upprättar en tvåvägsanslutning mellan View och komponent som gör det möjligt för användarna att utbyta data i båda riktningarna. Tvåvägsdatabindning kan enkelt uppnås genom att använda (ngModel).
Se till att importera FormsModule från @angular/forms till app.component.ts-filen om du använder (ngModel).