Adding Logic with Directive: ngIf

Directives are custom HTML element or attribute used to power up and extend our HTML. Previously in our example, we had used custom directive.



There are several Angular Built-in directives but for this module we'll be using '*ngIf' which is If logic and '*ngFor' which is For loops directives. They are also called structural directive because they modify the structure or layout of the view by adding, removing, manipulating elements in DOM.

*ngIf Build-in Directive



when used the above code, it means that 'table' will show if the table content are available and 'table' will hide if there are no table content.

Now, let's use if condition in our application.



You have noticed under 'product-list.component.ts', data type of 'products' is 'any[]'. We can use this data type if we are uncertain about the specific data type. Also, we have added static JSON formatted data here but most of the time data comes from backend server.

Share this

Related Posts