Pass variable to custom component
You need to add Input property to your component and then use property binding to pass value to it:
import { Component, Input } from '@angular/core';@Component({ selector: 'my-custom-component', templateUrl: './my-custom-component.html', styleUrls: ['./my-custom-component.css']})export class MyCustomComponent { @Input() customTitle: string; constructor() { console.log('myCustomComponent'); } ngOnInit() { console.log(this.customTitle); }}And in your template:
<my-custom-component [customTitle]="yourVariable"></my-custom-component>For more info, check out this page.
You can add an @Input() decorator to a property on your component.
export class MyCustomComponent { constructor() { console.log('myCustomComponent'); } @Input() title: string;}<my-custom-component title="My Title"></my-custom-component>or binding title from a variable 'theTitle'
<my-custom-component [title]="theTitle"></my-custom-component>See the @Input()decorator documentation.