CODEWITHSUNDEEP
angulartypescriptcomponentsangular8angular-ng-if
AchrafBj
AchrafBj

Reputation: 1211

How can I make two HTML templates conditionally for one component with Angular 8

I have this component:

@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.css'],
  providers: [YoutubeService]
})

For some reasons I need to create an other templateURL form1.component.html conditionally.

this component contains a dialog with two buttons ( button1 and button2 ) if i click button1 i want form.component load form.component.html and if i click button2 i want form.component load form1.component.html

How can I conditionally use 2 HTML files for one component?

is there a solution like this?

@Component({
  selector: 'app-form',
  templateUrl: if (condition) => './form.component.html' else './form1.component.html',
  styleUrls: ['./form.component.css'],
  providers: [YoutubeService]
})

Upvotes: 0

Views: 2258

Answers (2)

SmileDev94
SmileDev94

Reputation: 34

app-component.html :

<first-component *ngIf="compoService.isfirst"></first-component>
<second-component *ngIf="!compoService.isfirst"></second-component>

app-component.ts :

import { CompoService } from '../compo.service';
//... other imports

//... logic

constructor(public compoService: CompoService) {}

//... logic

compo.service.ts :

export class CompoService {

  ServiceSubject = new Subject<any[]>();

  isfirst: boolean = true;

  constructor() { }

  template1() {
    this.isfirst = false;
  }

  template2() {
    this.isfirst = true;
  }

dialog-component.html :

<input type="radio" name="radio3" id="template1">     
 <label for="template1" (click)="template1()">load templae 1</label>

<input type="radio" name="radio3" id="template2">           
 <label for="template2" (click)="template2()">load templae 2</label>

dialog-component.ts :

import { CompoService } from '../compo.service';
//... other imports

//... logic

constructor(public compoService: CompoService) {}

  template1() {
    this.compoService.template1();
  }

  template2() {
    this.compoService.template2();
  }

Upvotes: 0

Cerbrus
Cerbrus

Reputation: 72857

That's not how angular components work.

You'll need to either use an *ngIf condition in your component's HTML, or you need to conditionally insert a sub-component into your component's template.

If you want to share logic between these sub-components, they can extend a base class:

abstract class ComponentBase { }
class ChildComponentOne extends ComponentBase { }
class ChildComponentTwo extends ComponentBase { }

Upvotes: 3

Related Questions