Angular 7 built in attribute directives

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,

  1. NgClass – is used to add or remove a class or set of css classes
  2. NgStyle – is used to add or remove a HTML style or set of HTML styles
  3. 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”/>
One thing to remember here,  the [(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)”/>
I have made the following StackBlitz example, so you can fiddle with it and grasp the most out of it.

This wraps up today’s post. Hope you liked it 🙂

Share

Leave a Reply

Your email address will not be published. Required fields are marked *