Custom Template

[mustafaekim]

Hi, it works for me with the default mode. (Running with Angular Material)

However when I replace with the code below, I had some guiding without any style.

<tour-step-template>
    <ng-template let-step="step">
        <md-card (click)="$event.stopPropagation()">
            <md-card-title>
                {{step?.title}}
            </md-card-title>
            <md-card-content>
                {{step?.content}}
            </md-card-content>
            <md-card-actions>
                <button md-icon-button [disabled]="!tourService.hasPrev(step)" (click)="tourService.prev()"><md-icon>chevron_left</md-icon></button>
                <button md-icon-button [disabled]="!tourService.hasNext(step)" (click)="tourService.next()"><md-icon>chevron_right</md-icon></button>
                <button md-button (click)="tourService.end()">End</button>
            </md-card-actions>
        </md-card>
    </ng-template>
</tour-step-template>

[isaacplmann]

Let me see if I understand what you're saying. If you don't use a custom template, the tour step is styled correctly, but if you put in the custom template, no css is applied. Is that what's happening? Are you using other angular material component in your app? Are they styled correctly?

[mustafaekim]

Oh, sorry for not being clear with my English. Yes, that's exactly what is happening here.

Below are the screenshots

https://ibb.co/mA5aGa
https://ibb.co/nAB49v

[mustafaekim]

Let me check more deeply until tomorrow. I will let you know

[mustafaekim]

OK, it worked when I added MdCardModule into imports. I didnt understand why but somehow it worked.

[isaacplmann]

Yes, that would make sense. You need to have MdCardModule and MdButtonModule available if you're going to use them in your custom template.

[isaacplmann]

Closing since you found the solution.

[kahboom]

Had this same issue, thanks @mustafaekim ! @isaacplmann , will add that to the documentation when I get the chance, as I think it could be helpful.

[isaacplmann]

@kahboom PRs are always welcome. Thanks!