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:

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
8 Likes