pass parameter through selectors in component Angular 2

angular angular2-components
amansoni211 picture amansoni211 · Dec 8, 2016 · Viewed 7.7k times · Source

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>

Answer

ranakrunal9 picture ranakrunal9 · Dec 8, 2016

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 = '';
}

Related questions

How to call another components function in angular2

I have two components as follows and I want to call a function from another component. Both components are included in the third parent component using directive. Component 1: @component( selector:'com1' ) export class com1{ function1(){...} } Component 2: @component( selector:'com2…

Read More
Angular - What is the meanings of module.id in component?

In an Angular app, I have seen that @Component has property moduleId. What does it mean? And when module.id is not defined anywhere, the app still works. How can it still work? @Component({ moduleId: module.id, selector: 'ng-app', templateUrl: …

Read More
Pass variable to custom component

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 …

Read More