How to inherit html tags or how remove component tags in DOM?-CodePudding

a lot time wasted on this problem. I have the problem in two places. I have 14.2.0 version of Angular. The issue:

I want to make a structure, at example:

<div >  //this first component
  <div >            //this first component
    <div ></div>  //this second component 
    <div ></div>   //this third component
  </div>
</div>

i made this:


<app-navbar></app-navbar>

<app-sidenav>
  <sidenav-menu
    mdbCollapse
    #sidenav="mdbCollapse"
    id="sidenavId"
  >
<!--   <app-sidebar></app-sidebar>-->
  </sidenav-menu>


  <sidenav-content>
    <div >hello </div>
  </sidenav-content>
</app-sidenav>
<div 
      type="button"
     (click)="sidenav.toggle()"
     [attr.aria-expanded]="!sidenav.collapsed"
     aria-controls="sidenavId"
>show</div>
<app-footer></app-footer>

But when I match all - all structure is showing incorrect. Because between my .row and .col-2 was created my component tag and all styles applied for my component, but not to my div with .col-2. I will show you below:

between the divs was created my side-navmenu block and my div after him not work

same situation was with map-frame. I wanted create component with map code(leaflet). Code worked good without refactor him in component. After refactor in component the code became work incorrect. What a magic happened with component? How correct inherit tags with angular cli?

I tried to find an info in Angular docs but found only about Encapsulated styles. It's not same. I think maybe tag of component miss in time server side rendering?

CodePudding user response：

In component decorator use:

@Component({
  selector: '[my-component]', //instead of 'my-component'
  ...
})
...

In parent component use:

<div my-component >  
...

instead of <my-component>