How to create a new component in Angular?

How to use ngIf without an extra element in Angular2?

Last Updated : 29 Jul, 2020

In order to use *ngIf without an extra element in Angular 2+, we can use either <ng-container> or <ng-template>
But in many cases, <ng-container> is recommended.
The best scenario regarding the usage of with *ngIf without an extra element is mentioned below.

app.component.ts:

import { Component } from '@angular/core'; 
@Component({ 
  selector: 'my-app-table', 
  template: './app.component.html', 
  styleUrls: [ './app.component.css' ] 
}) 
export class AppComponent  { 
  
India=[{city:'Hyderabad'}, {city:'Mumbai'}] 
  
} 

app.component.html :

<h1>ng-container example</h1> 
  
 <div *ngFor="let state of India">  
   <ng-container *ngIf="state.city"> 
      <p> {{ state.city }} </p> 
   </ng-container> 
 </div> 

Illustration of above code for ng-container

If we inspect it then we can see there is no extra element added after <div> tag and before <p> tag.

How to create a new component in Angular?

B

bunnyram19

Improve

Article Tags :

Similar Reads

How to use *ngIf else in AngularJS ?

Introduction: The ngIf directive is used to show or hide parts of an angular application. It can be added to any tags, it is a normal HTML tag, template, or selectors. It is a structural directive meaning that it includes templates based on a condition constrained to boolean. When the expression eva

How to use Pipes within ngModel on input Element in Angular ?

The ngModel directive is a directive that is used to bind the values of the HTML controls (input, select, and textarea) or any custom form controls, and stores the required user value in a variable and we can use that variable whenever we require that value. In this article, we will learn about Usin

How to detect when an @Input() value changes in Angular?

@Input() is basically a decorator to bind a property as an input. It is used to pass data i.e property binding from one component to other or we can say, from parent to child component. It is bound with the DOM element. When the DOM element value is changed, Angular automatically updates this proper

How to create a new component in Angular?

A component in Angular is the building block for making web pages. It is a reusable block of code that can be used anywhere in the app any number of times. It provides scalability, reusability, and readability. Each component does a specific job like showing a menu, a photo or a card, etc. In this a

How to update an array element in AngularJS ?

Given an array with an initial array of elements & the task is to update an array element using AngularJS. To update a particular item in an array, there are 2 ways, i.e., either by its value or by its index. Here, we will use the concept of the Property accessors method that is used to access t

How to select an element by its class name in AngularJS?

Given an HTML document and the task is to select an element by its className using AngularJS. The elements can be selected with the help of a class name using the document.querySelector() method that is used to return the first element that matches a specified CSS selector(s) in the document. Approa

How to empty the content of an element using AngularJS ?

In this article, we will see how to remove the content of an element in HTML DOM using AngularJS. This task can be accomplished by implementing the jQuery empty() method that removes all child nodes and their content for the selected elements. Syntax: element.empty();Parameter: This method does not

How to call an Angular Pipe with Multiple Arguments ?

Angular Pipes are a way to transform the format of output data for display. The data can be strings, currency amounts, dates, etc. Pipes are simple functions that accept an input and return a transformed value in a more technical understanding. In this article, we will see How to call an Angular Pip

How to apply filters to *ngFor in Angular ?

In this article, we will see How to apply filters to *ngFor in AngularJS, along with understanding their basic implementation through the examples. NgFor is used as a Structural Directive that renders each element for the given collection each element can be displayed on the page. Implementing the f

How to add Buttons without Submit the Form in Angular?

In Angular, when adding buttons to a form, their default behavior on click is to submit the form itself. However, there are certain situations in which it is necessary to create buttons for forms that provide some sort of functionality or trigger custom logic without triggering the default form subm