I want to integrate multiple layouts for different components so I created 2 different layouts.
i.e. inside.html, inside.ts and outside.html, outside.ts.
Both components have different selectors so which one should I use in index.html file ? What is the exact way to achieve this ?
<div *ngIf="true">
<div id="wrapper">
<navbar></navbar>
<div class="gray-bg">
<router-outlet></router-outlet>
<footer></footer>
</div>
</div>
<div *ngIf="false">
<div class="blue">
<router-outlet></router-outlet>
<footer></footer>
</div>
Build an AppComponent with a selector. Add its selector to index.html. Then add the code shown in your question to AppComponent.
This makes the bootstrapping process easier because there is only one component (AppComponent) that needs to be bootstrapped and used in index.html.