Transfer a segment of template from one angular 4 component to another

Question

Transfer a segment of template from one angular 4 component to another

Essentially, in the template of component 1, I have something like this:

<div>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
</div>

Then in the template of component 2 (which is a sibling of component 1), I have the following:

<div class="test">
  <h1>component 2</h1>
</div>

What I am aiming for is that when a specific variable in component 2, let's say "toggled" equals true, the template of component 2 should change to include the list from component 1.

<div class="test">
   <h1>component 2</h1>
   <ul>
     <li>1</li>
     <li>2</li>
     <li>3</li>
    <li>4</li>
   </ul>
</div>

I am working with Angular version 4.0.0 and I came across information about templateoutlet, but I couldn't quite grasp how to share it between different components. Is there a way to duplicate a template fragment from one component and use it in another component?

angular typescript angular2-template angular2-components ng-template

Answer 1

Answer №1

An effective way to utilize is by using the ng-template feature.

Injectable()
export class TemplatePasser{
    template;

}

Here is an example of a component that includes a template:

@Component({
  selector:'custom'
  template:`

     <ng-template #template>
         <div class="test">
          <h1>component 2</h1>
        </div>
       </ng-template>  


`
})
export class CustomComponent{

   constructor(private templatePasser:TemplatePasser){


   }
   @ViewChild('template') templateRef:TemplateRef
   ngAfterViewInit(){
       this.templatePasser.template =template;
    }
}


And here is another component that makes use of the template:

@Component({
  selector:'the-other-custom'
  template:`

   <div *ngIf="template" class="test" style="border:1px solid red">
       <div [ngTemplateOutlet]="template"></div>
       <ul>
         <li>1</li>
         <li>2</li>
         <li>3</li>
        <li>4</li>
       </ul>
    </div>  


`
})
export class CustomComponent{

   constructor(private templatePasser:TemplatePasser){}
   template
   ngAfterViewInit(){
       this.template = this.templatePasser.template;
    }
}

Check out this link for more information!

Answer 2

An effective way to utilize is by using the ng-template feature.

Injectable()
export class TemplatePasser{
    template;

}

Here is an example of a component that includes a template:

@Component({
  selector:'custom'
  template:`

     <ng-template #template>
         <div class="test">
          <h1>component 2</h1>
        </div>
       </ng-template>  


`
})
export class CustomComponent{

   constructor(private templatePasser:TemplatePasser){


   }
   @ViewChild('template') templateRef:TemplateRef
   ngAfterViewInit(){
       this.templatePasser.template =template;
    }
}


And here is another component that makes use of the template:

@Component({
  selector:'the-other-custom'
  template:`

   <div *ngIf="template" class="test" style="border:1px solid red">
       <div [ngTemplateOutlet]="template"></div>
       <ul>
         <li>1</li>
         <li>2</li>
         <li>3</li>
        <li>4</li>
       </ul>
    </div>  


`
})
export class CustomComponent{

   constructor(private templatePasser:TemplatePasser){}
   template
   ngAfterViewInit(){
       this.template = this.templatePasser.template;
    }
}

Check out this link for more information!

Transfer a segment of template from one angular 4 component to another

Answer №1

Similar questions

Tips for preventing memory leaks when utilizing the Subject programming feature

Is it possible to pass a variable to a text constant in Angular?

Steps for signing up for an ngRx state

What is the best way to ensure that two promises are both resolved before triggering a function from within a promise?

Guide on how to import a CSV file into an Angular project using tensorflow.js

Delaying the tap after emitting an action in the Ngrx store

Is there an external class available to integrate with my interface?

When utilizing a generic type with a class, type T fails to meet the specified constraint

Expanding a TypeScript interface across different modules

Passing a boolean value from the parent Stepper component to a child step in Angular

What could be causing the QullJS delta to display in a nonsensical sequence?

Unfortunately, the utilization of an import statement outside a module is restricted when working with Electron

Communication between parents and children is crucial for building strong relationships and providing validation

cdkVirtualFor failing to display complete list of items

What causes the failure of Angular 2 RC.6 routing when bundled with ngc + Rollup?

When the Mat menu radio button inside a Bootstrap popover is clicked, it will automatically close the popover

How can I populate a mat-table in Angular 7 with data stored in an object?

Issue with RouterLink functionality in Angular 6

You cannot call this expression. The data type 'Boolean' does not have any callable signatures

Is there a way to differentiate between the AzDO extension running in a YAML pipeline versus a Classic pipeline?