alternateSide doesn't work with ngFor

[oliveroing]

Hello! I'm using the library and when I apply an *ngFor directive to a mzd-timeline-content , it doesn't alternate sides.
This is the code:

<mzd-timeline [alternateSide]="true"> <mzd-timeline-content *ngFor="let activity of activities"> <mzd-icon><mat-icon>podcasts</mat-icon></mzd-icon> {{ activity.observations }} </mzd-timeline-content> </mzd-timeline>

Can anyone help me? Thank you!

P.S.: I have some others issues: can I change de font ? Why when I use mat-icon it doesn't shows centered on the circle?

[mazeduldev]

Hi @oliveroing,

*ngFor should have no issue with alternate side. BTW alternate side will not work on mobile device or smaller screen. Have you tested on larger screens?

If your particular icon does not place in the center of the circle you can try adding negative margin in the mat-icon.
For example:

mzd-icon > mat-icon {
    margin-top: -3px;
    margin-left: -5px;
}

[oliveroing]

Hi @mazid1 ! Thank you for your answer!
I have resolved the issue! The problem was that de component was initiating and the data arrived later, so the alternate side function didn't work. I added a resolve function in my component and it works.
The icon problem is also resolved.
I added my material_theme and works. I had to add scss manually to get the font-family work.
Final question: Can I change the colors of the components with attributes in html ?

Thank you!

[mazeduldev]

Good to know that you have fixed your problems!

Unfortunately there is no option for changing colors of the components with attributes in html. I did not have this in mind when implementing this library. Maybe in future I'll add this feature (unless any other contributor will do that before then). I already have thought to make colors changeable for the main vertical line and the small arrows. But these are not implemented yet.

At this moment you can use scss to change colors of the components.

[oliveroing]

I undestard! I already changed with scss. Thank you for your help!

[ozunandres]

@oliveroing Could you show me your code, I'm starting in angular and I don't know what you mean by resolve function, thanks