1

I have an Angular 8 app.

Following the below article I got an understanding of ContentChildern, QueryList etc. & build a sample tabs component.

https://juristr.com/blog/2016/02/learning-ng2-creating-tab-component/

This is how my app component with tabs looks like

//our root app component
import { Component, ViewChild } from '@angular/core';
import { TabsComponent } from './tabs/tabs.component';

@Component({
 selector: 'my-app',
 template: `
 <my-tabs>
  <my-tab [tabTitle]="'Tab 1'">
    Tab 1 content
  </my-tab>
  <my-tab tabTitle="Tab 2">
    Tab 2 content
  </my-tab>
</my-tabs>
`
})
export class AppComponent { }

But I have lengthy HTML template as each tab content rather a simple string.

How do I point to an HTML template as Tab content against each tab? Something like below

 <my-tab [tabTitle]="'Tab 1'">
    //templateUrl -> tab1.content.html
  </my-tab>

Thanks!

Kgn-web
  • 7,047
  • 24
  • 95
  • 161
  • Pure html, or another angular component? (https://stackoverflow.com/questions/31548311/angular-html-binding) – Caramiriel Nov 04 '19 at 13:05

1 Answers1

0

like this:

 <nav mat-tab-nav-bar color="accent" backgroundColor="accent">
<a
  mat-tab-link
  routerLinkActive="active"
  [routerLinkActiveOptions]="{ exact: true }"
  [routerLink]="['/customers/update', id]"
>
  Info
</a>
<a
  mat-tab-link
  routerLinkActive="active"
  [routerLink]="['/customers/update', id, 'contacts']"
>
  Contacts
</a>
<a
  mat-tab-link
  routerLinkActive="active"
  [routerLink]="['/customers/update', id, 'locations']"
>
  Locations
</a>
</nav>
<div>
  <router-outlet></router-outlet>
</div>

and just load your components in your router

Ruben
  • 8,956
  • 14
  • 63
  • 102