Hello all,
Hope you are keeping well 🙂 In this short post I will be talking about Angular 7’s built in attribuite directives. Most commonly used Angular 7’s built in attribute directives are,
- NgClass – is used to add or remove a class or set of css classes
- NgStyle – is used to add or remove a HTML style or set of HTML styles
- NgModel –Â two-way data binding to an HTML form element
Let’s take a look at individual item in detail.
NgClass
The main purpose of the NgClass
is to add one or many CSS class / classes to an HTML element. To make things more understandable I have came with a scenario like this.
Let’s assume that we have two CSS classes. Depending upon a condition I want these two classes to be bound to an element.
In the StackBlitz example below we have two examples. The first one is, you are binding one class attribute per CSS class at a time and the other one is binding multiple CSS classes to the same class attribute at a time.
If you press the first button (Toggle Condition), you will see the first paragraph will get applied with the stylings of CSS class “horse” and the second paragraph will get the styles from both CSS classes “horse, rat” (in order).
Whereas, if you press the the scond button (Togle some other condition), both “horse” and “rat” will be bound to the paragraph.
NgStyle
The main purpose of the NgStyle
is to add one or more style properties (inline styles) to an HTML element. Refer to the following use case.
Let’s imagine, you have two paragraphs. The color of those paragraphs will depend upon a condition. For an example, if the “conditionHorse” is true, then the first paragrpah will change its color to Blue. In the second paragraph, if the “conditionRat” is true, then the color will change to Red. You can try these two scenarios by pressing the “Toggle Horse” and “Toggle Rat” buttons.
Rather than adding one inline style at a time, there might be instance where you will have to add multiple inline style properties at once. In the following example, what happens when you press the “Toggle Other” button is, it adds number of inline style properties (such as font-style, italic, font-weight and so on) to the paragraph.
NgModel
NgModel
is extremely useful and I can guarantee that you will be using this quite a lot compared to other two built in attribute directives which we discussed above.
This is what the Angular document says about NgModel.
When developing data entry forms, you often both display a data property and update that property when the user makes changes. Two-way data binding with the NgModel directive makes that easy
By the way, you will have to have “FormsModule” enabled and imported in the app.module.ts file to use NgModel.
The benefit of using NgModel is, it automatically gets the updated value of the input field as it change. This is called “two-way data binding“.  It is important to mention that NgModel can only be used with form native elements (i.e text field, drop down, checkbox, radion button, etc).
NgModel Two-way data binding
By adding [(ngModel)],
you make the input field a two-way binding element. See, below.
<input type=”text” [(ngModel)]=”name”/>
[(ngModel)]
 syntax can only set a data-bound property. If you need to do something different, you can write the expanded form like this.<input type=”text” [ngModel]=”name” (ngModelChange)=”setUppercaseName($event)”/>
This wraps up today’s post. Hope you liked it 🙂