Search code examples
angularangular2-components

pass parameter through selectors in component Angular 2


I actually want to apply a specific class on button (which is in btn.component.html) if it is passed through the selector.

my selector is

<btn></btn>

btn.component.ts is

import {Component} from '@angular/core';

@Component({
  selector: 'btn',
  template: require('./btn.component.html')
})

export class BtnComponent { }

btn.component.html is

<button>Okay</button>

Solution

  • You can pass class name as params like :

    <btn className="btn-class"></btn>
    

    //Component

    import { Component, Input } from '@angular/core';
    
    @Component({
      selector: 'btn',
      template: `<button [class]="className">Okay</button>`
    })    
    export class BtnComponent {
      @Input() className :string = '';
    }