Angular 8: Passing html as input variable

Question

We can use @Input as passing input props or data. We also can use <ng-content> to dump a load of html into the children component. Is there any way to pass html as Input. Like @Input html1, @Input html2, and use them in the child class component?

Suppose I have this html in child class:

<div class='wrapper'>
  <div class="content1 exclusive-css-defined-to-this-component">
     <div>{$content1}</div>
  </div>
  <div class="content2 exclusive-css-defined-to-this-component-2">
    <div>{$content2}</div>
  </div>
</div>

And I want to pass $content1 & $content2 as input.

Sakibur Rahman · Accepted Answer · 2019-11-14 19:00:13Z

9

I have found the solution, this can be done by:

<div class='wrapper'>
  <div class="exclusive-css-defined-to-this-component">
     <div><ng-content select="[content1]"></ng-content></div>
  </div>
  <div class="exclusive-css-defined-to-this-component-2">
    <div><ng-content select="[content2]"></ng-content></div>
  </div>
</div>

And we can use the component like:

<wrapper>
   <div content>Any thing you want to put in content1</div>
   <div content2>Any thing you want to put in content2</div>
</wrapper>

answered Nov 14, 2019 at 19:00

Sakibur Rahman

9143 gold badges11 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Gangadhar Gandi · Accepted Answer · 2019-11-06 06:54:55Z

4

We can use innerHTML to achieve this

Sample example demonstrating this,

parent.component.ts,

export class ParentComponent {
  htmlOneAsString = `
    <div>Welcome Text Header</div>
  `;

  htmlTwoAsString = `
    <div>Welcome Text Content</div>
  `;

  htmlAsString = `
    <div><div>${this.htmlOneAsString}</div><div>${this.htmlTwoAsString}</div></div>
  `;
}

parent.component.html,

<child [innerHTML]="htmlAsString"></child>

child.component.ts,

@Component({
  selector: 'child'
})
export class ChildComponent {
  @Input() htmlAsString: string;
}

child.component.html,

<div>{{htmlAsString}}</div>

edited Nov 6, 2019 at 6:54

answered Nov 5, 2019 at 23:48

Gangadhar Gandi

2,26214 silver badges20 bronze badges

4 Comments

Sakibur Rahman Over a year ago

This will not serve my purpose as this way we only can pass a single input. What if we want to pass several props?

Gangadhar Gandi Over a year ago

You can form a single html string combining all your htmls in ts file using javascript template string. How about this?

Gangadhar Gandi Over a year ago

Updated the answer. Could you please check

Sakibur Rahman Over a year ago

Not exactly what I am looking for. I have updated my question. Could you take look?

Thomas Cayne · Accepted Answer · 2019-11-05 23:44:19Z

1

You can place your html in a string like

htmlStr = "<strong>This is an example</strong>";

and pass it through to a service:

this.whateverService.setHtml(this.htmlStr);

then in the receiving component:

import { WhateverService } from 'src/app/shared/service/whatever.service';

export class ReceivingComponentThing implements OnInit {
 htmlExample = '';

constructor(private whateverService: WhateverService) {}
}

ngOnInit() {
 // have a getter/setter in service however you like
 this.htmlExample = this.whateverService.getHtmlExample();
}

in your template:

<div [innerHtml]="htmlExample"><div>

answered Nov 5, 2019 at 23:44

Thomas Cayne

1,63012 silver badges18 bronze badges

Collectives™ on Stack Overflow

Angular 8: Passing html as input variable

3 Answers 3

Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related