CODEWITHSUNDEEP
angulartypescript
JenuRudan
JenuRudan

Reputation: 545

Angular 4 adding a component with unclosed element

I'm developing a project using Angular 4 my app component:

<app-header></app-header>
<app-sidebar></app-sidebar>
<div class="content-wrapper">
<router-outlet></router-outlet>
</div>
<app-footer></app-footer>

when ever i put div of content-wrapper and in app sidebar html and close it at the begining of the footer , the app keeps loading, also this happens when it's a div without a class or any other element

Upvotes: 0

Views: 577

Answers (1)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657781

The template of a component needs to be valid HTML, therefore only having the opening or only the closing element in a template is not supported.

You could have an <app-header-and-footer> component with an <ng-content> element to get the same effect.

<app-header-and-footer></app-header-and-footer>
  <app-sidebar></app-sidebar>
  <div class="content-wrapper">
  <router-outlet></router-outlet>
  </div>
</app-header-and-footer>

@Component({
   selector: 'app-header-and-footer',
   template: '<ng-content></ng-content>'
})
export class AppHeaderAndFooter{}

Upvotes: 1

Related Questions