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.

Answer: 
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>

```
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>

```