Angular 5: generate DIV instead of new tag from component

Question

I'd like to know if there's a way to tell Angular to generate a DIV instead of a new tag when inserting a component in a router-outlet. Right now, I have this component code:

import { Component, OnInit, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-fwc-vpn-main',
  templateUrl: './fwc-vpn-main.component.html',
  styleUrls: ['./fwc-vpn-main.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class FwcVpnMainComponent implements OnInit {

  numbers = new Array(35);

  constructor() { }

  ngOnInit() {
  }

}

Which renders to this in the final HTML:

<router-outlet></router-outlet>
<app-fwc-vpn-main class="ng-star-inserted"> ... </app-fwc-vpn-main>

What I would need is to generate a div with some added classes, so the final result would be something like this:

<router-outlet></router-outlet>
<div app-fwc-vpn-main class="grid-y medium-grid-frame"> ... </div>

NOTE: I need to add the grid-y and medium-grid-frame classes so the app has the correct layout. This is the main reason I want to change the inserted tag for this div.

Thanks in advance,

despite what has been said, a directive is the correct way to go — mast3rd3mon, Mar 05 '18 at 12:52
@mast3rd3mon Please create example to show us that it's working — yurzui, Mar 05 '18 at 12:57
@yurzui see https://angular.io/guide/attribute-directives#write-the-directive-code — mast3rd3mon, Mar 05 '18 at 12:59
@mast3rd3mon Show us example with router. I know how to create directive — yurzui, Mar 05 '18 at 13:00
@yurzui if you know how to create a directive, why are you arguing against them? — mast3rd3mon, Mar 05 '18 at 13:01
@mast3rd3mon I would like to see how you will adopt directive to be used in angular router with empty template — yurzui, Mar 05 '18 at 13:03
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/166244/discussion-between-mast3rd3mon-and-yurzui). — mast3rd3mon, Mar 05 '18 at 13:05

yurzui · Accepted Answer · 2018-03-05T18:19:07.267

In angular selector may be declared as one of the following:

element-name: select by element name.
.class: select by class name.
[attribute]: select by attribute name.
[attribute=value]: select by attribute name and value.
:not(sub_selector): select only if the element does not match the sub_selector.
selector1, selector2: select if either selector1 or selector2 matches.

So when angular compiles Component/Directive metadata it parses selector by using CssSelector and keep all parsed data like:

[
  {
    "element": null,
    "classNames": [
      "grid-y",
      "medium-grid-frame"
    ],
    "attrs": [
      "app-fwc-vpn-main",
      ""
    ],
    "notSelectors": []
  }
]

Angular router creates component dynamically so each of our routed components will have Host view. For Host view angular compiler prepares template based on metadata received from CssSelector:

/** Gets a template string for an element that matches the selector. */
getMatchingElementTemplate(): string {
    const tagName = this.element || 'div';
    const classAttr = this.classNames.length > 0 ? ` class="${this.classNames.join(' ')}"` : '';

    let attrs = '';
    for (let i = 0; i < this.attrs.length; i += 2) {
      const attrName = this.attrs[i];
      const attrValue = this.attrs[i + 1] !== '' ? `="${this.attrs[i + 1]}"` : '';
      attrs += ` ${attrName}${attrValue}`;
   }

   return getHtmlTagDefinition(tagName).isVoid ? `<${tagName}${classAttr}${attrs}/>` :
                                                  `<${tagName}${classAttr}${attrs}></${tagName}>`;
 }

https://github.com/angular/angular/blob/c8a1a14b87e5907458e8e87021e47f9796cb3257/packages/compiler/src/selector.ts#L91-L105

After that host template will be like:

<div class="grid-y medium-grid-frame" app-fwc-vpn-main></div>

So the following should work for you:

selector: '[app-fwc-vpn-main].grid-y.medium-grid-frame',

Example

That worked! Please, can you send a link to any documentation that explains this syntax? Thank you very much! — Fel, Mar 05 '18 at 12:42
@Fel , please checkout the link I have posted in answer that would be enough for the component's each property — Vivek Doshi, Mar 05 '18 at 12:47
@yurzui thanks for the explanation! Do you know if there is way to select based on element and attribute? E.g. `nz-content[example]` — LppEdd, Jul 02 '19 at 12:20

score 2 · Answer 2 · answered Mar 05 '18 at 12:21

2

Then change the selector from :

selector: 'app-fwc-vpn-main',

To

selector: '[app-fwc-vpn-main]',

And then you can use it like <div app-fwc-vpn-main></div>

@Component selector - css selector that identifies this component in a template

So you can use any css selector like
.app-fwc-vpn-main // <div class='app-fwc-vpn-main'></div>
#app-fwc-vpn-main // <div id='app-fwc-vpn-main'></div>

For more details read : Component

answered Mar 05 '18 at 12:21

Vivek Doshi

56,649
12
110
122

A `@Directive` would need to be used in order for `app-fwc-vpn-main` to be a property as such on the div – mast3rd3mon Mar 05 '18 at 12:34
@mast3rd3mon About which property are you talking about? – yurzui Mar 05 '18 at 12:37
`app-fwc-vpn-main`, for that to belong on a div like so `
...
` it would need to be a directive – mast3rd3mon Mar 05 '18 at 12:38
@mast3rd3mon , If it looks/use like attribute it doesn't means it should be directve. – Vivek Doshi Mar 05 '18 at 12:41
properties should be inputs/outputs, attributes (thats the work i meant) should be directives – mast3rd3mon Mar 05 '18 at 12:42

score -1 · Answer 3 · edited Mar 05 '18 at 12:31

-1

Create a directive instead of a component

<div app-fwc-vpn-main class="grid-y medium-grid-frame"> ... </div>

In this case app-fwc-vpn-main is the directive. Instead of creating a component you can create a directive and render your desired template.

edited Mar 05 '18 at 12:31

mast3rd3mon

8,229
2
22
46

answered Mar 05 '18 at 12:23

Santosh Singh

561
2
16

1

And why is that ? – Vivek Doshi Mar 05 '18 at 12:25
@VivekDoshi because the `app-fwc-vpn-main` needs to be a directive to be used how @Fel wants – mast3rd3mon Mar 05 '18 at 12:26
Nope , This is not how things goes , @mast3rd3mon , Please read https://stackoverflow.com/questions/32680244/directive-v-s-component-in-angular – Vivek Doshi Mar 05 '18 at 12:29
1

Just one question... How are you going to work with component template? – yurzui Mar 05 '18 at 12:30
@yurzui probably people who understand what a '@Directive` is and why it is needed in this case – mast3rd3mon Mar 05 '18 at 12:35
@yurzui , me too – Vivek Doshi Mar 05 '18 at 12:37

Angular 5: generate DIV instead of new tag from component

3 Answers3

Linked