Include span or HTML as input to Angular component-CodePudding

Let's say I have a component where the ts file looks something like this:

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.scss']
})
export class MyComponent implements OnInit {

  @Input() header: string;

  constructor() { }

  ngOnInit() {
  }

}

On my HTML page I then write something like:

<my-component header="Hello"></my-component>

And Hello will then be shown with whatever CSS I use. However, how can I pass like a <span> to this header input, if I were to emphasize a word or something, e.g:

<my-component header="Hello my <span>friend</span>"></my-component>

And then friend would get another color, another font-weight or similar.

CodePudding user response：

Normally, inputs are used to pass small info to the component, like a name or a number. The structure of how and where this info is shown is up to the layout and style of the component. So you should implement something like:

In the my-component.component.html:

Hello my <span>{{header}}</span>

And when you use the component, pass the value of header like you did:

<my-component header="Hello"></my-component>

This way you can use my-component.component.scss file to style the text (and all your component layout) as you wish.

CodePudding user response：

Just to add on Manuel answer, if you want to pass multiple HTML nodes (or components) to your MyComponent component, you can use https://angular.io/guide/content-projection.

This way, you can call your component this way :

<my-component>Hello <span>my friend</span></my-component>

And then in your MyComponent template, you can retrieve this content using the <ng-content></ng-content> tag.