Pass parameter in component

I have a component where I make the instance of it in four pages, which are steps to a register. At each step, the ball becomes colored (use an active class) according to the page I am on. See the image below:

45

How can I pass by parameter the active class that paints the ball, according to the page I am?

I guess you could use @Input()

component:

@Component({
   select: 'my-component'
})
export class MyComponent {
     @Input() step: string;
}

your calling html (where you use your component):

 <my-component [step]="'thevalueyouwant'"></my-component>

or

<my-component [step]="yourVariable"></my-component>

Is that what you are looking for or I didn’t understood your question?

P.S.: Just found that explaining and demo https://angular-2-training-book.rangle.io/handout/components/app_structure/passing_data_into_components.html

7 Likes