ng-container vs template

Question

ng-container is mentioned in the official documentation but I m still trying to understand how it works and what are use cases  It is particularly mentioned in ngPlural and ngSwitch directives  Does  lt ng-container gt  do the same thing as  lt template gt  or does it depend on whether a directive was written to use one of them  Are  lt ng-container  ngPluralCase  quot   0  quot  gt there is nothing lt  ng-container gt   and  lt template  ngPluralCase   quot   0  quot  gt there is nothing lt  template gt   supposed to be the same  How do we choose one of them  How can  lt ng-container gt  be used in a custom directive

User · Answer

In my case it acts like a  lt div gt  or  lt span gt  however even  lt span gt  messes up with my AngularFlex styling but ng-container doesn t

User · Answer

A use case for it when you want to use a table with  ngIf and  ngFor - As putting a div in td th will make the table element misbehave -  I faced this problem and that was the answer

User · Answer

The documentation  https   angular io guide template-syntax   star-template  gives the following example  Say we have template code like this    lt hero-detail  ngIf  currentHero   hero   currentHero  gt  lt  hero-detail gt    Before it will be rendered  it will be  de-sugared   That is  the asterix notation will be transcribed to the  notation    lt template  ngIf   currentHero  gt     lt hero-detail  hero   currentHero  gt  lt  hero-detail gt   lt  template gt    If  currentHero  is truthy this will be rendered as    lt hero-detail gt         lt  hero-detail gt    But what if you want an conditional output like this    lt h1 gt Title lt  h1 gt  lt br gt   lt p gt text lt  p gt       and you don t want the output be wrapped in a container   You could write the de-sugared version directly like so    lt template  ngIf   showContent  gt     lt h1 gt Title lt  h1 gt     lt p gt text lt  p gt  lt br gt   lt  template gt    And this will work fine  However  now we need ngIf to have brackets    instead of an asterix    and this is confusing  https   github com angular angular io issues 2303   For that reason a different notation was created  like so    lt ng-container  ngIf  showContent  gt  lt br gt     lt h1 gt Title lt  h1 gt  lt br gt     lt p gt text lt  p gt  lt br gt   lt  ng-container gt    Both versions will produce the same results  only the h1 and p tag will be rendered   The second one is preferred because you can use  ngIf like always

User · Answer

Edit   Now it is documented      lt ng-container gt  to the rescue      The Angular   lt ng-container gt   is a grouping element that doesn t interfere with styles or layout because Angular  doesn t put it in the DOM                  The   lt ng-container gt   is a syntax element recognized by the Angular parser  It s not a directive  component  class  or interface  It s more like the curly braces in a JavaScript  if-block     if  someCondition          statement1         statement2        statement3               Without those braces  JavaScript would only execute the first statement when you intend to conditionally execute all of them as a single block  The   lt ng-container gt   satisfies a similar need in Angular templates    Original answer   According to this pull request        lt ng-container gt  is a logical container that can be used to group nodes but is not rendered in the DOM tree as a node        lt ng-container gt  is rendered as an HTML comment    so this angular template       lt div gt       lt ng-container gt foo lt  ng-container gt   lt div gt    will produce this kind of output      lt div gt       lt  --template bindings   -- gt foo  lt div gt    So ng-container is useful when you want to conditionaly append a group of elements  ie using  ngIf  foo   in your application but don t want to wrap them with another element    lt div gt       lt ng-container  ngIf  true  gt           lt h2 gt Title lt  h2 gt           lt div gt Content lt  div gt       lt  ng-container gt   lt  div gt    will then produce     lt div gt       lt h2 gt Title lt  h2 gt       lt div gt Content lt  div gt   lt  div gt

User · Answer

Imo use cases for ng-container are simple replacements for which a custom template component would be overkill  In the API doc they mention the following      use a ng-container to group multiple root nodes   and I guess that s what it is all about  grouping stuff   Be aware that the ng-container directive falls away instead of a template where its directive wraps the actual content

[angular] <ng-container> vs <template>

Examples related to angular

Examples related to typescript

Examples related to angular2-template