95

I have my custom component:

@Component({
    selector: 'my-custom-component',
    templateUrl: './my-custom-component.html',
    styleUrls: ['./my-custom-component.css']
})
export class MyCustomComponent {
    constructor() {
        console.log('myCustomComponent');
    }
}

I can use it like this:

<my-custom-component></my-custom-component>

But how I can pass a variable? For example:

<my-custom-component custom-title="My Title"></my-custom-component>

And use this in my component code?

Collin Barrett
  • 2,441
  • 5
  • 32
  • 53
rpayanm
  • 6,303
  • 7
  • 26
  • 39
  • Using an input in your component: https://angular.io/docs/ts/latest/guide/template-syntax.html#!#inputs-outputs – JB Nizet Feb 17 '17 at 00:36
  • Just a note: there are 4-5 ways to do so. In this example that's a parent/child relationship, therefore it's easy and `Input` would work. However, for components without relation a service is required, take a look into the blog post https://fireship.io/lessons/sharing-data-between-angular-components-four-methods/ – Daniel Danielecki Sep 19 '20 at 16:41

2 Answers2

157

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.

Stefan Svrkota
  • 48,787
  • 9
  • 98
  • 87
  • 4
    this work! Any idea why `customTitle` variable is undefined in `constructor()` ? – rpayanm Feb 17 '17 at 15:03
  • 4
    @rpayanm It's `undefined` because `Input` is Angular's decorator and dit "lives" through Angular's lifecycle, therefore it's only available in `OnInit` and after (`constructor` doesn't have anything to do with Angular, it is initialised before `OnInit`). You can read more about Angular's lifecycle hooks here: https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html – Stefan Svrkota Feb 17 '17 at 15:05
  • but how can access string "myAnotherVariable" ? myAnotherVariable – Jiří Doubravský Nov 24 '17 at 09:41
  • 2
    why potentially customTitle could be "undefined"? because I receive this – Anna Leonenko May 27 '18 at 02:02
  • 1
    @AnnaLeonenko maybe you specified a static value with `[customTitle]="yourLitteralString"` instead of `customTitle="yourLitteralString"` – Pipo Jun 19 '19 at 20:47
  • Why "yourVariable" ? Use `{{customTitle}}` in your html code... – alex Feb 23 '20 at 17:09
  • `public customTitle: string` – TomSelleck Jun 04 '21 at 15:27
24

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.

Garth Mason
  • 7,611
  • 3
  • 30
  • 39