Step symbol template #149
Step symbol template #149
Conversation
…ar template.
For example:
```
<div awWizardStep>
<ng-template awWizardStepTitle>
Address information
</ng-template>
<ng-template awWizardStepSymbol>
<i class="fa fa-taxi"></i>
</ng-template>
</div>
```
TODO:
- Document in the main README.md
- Add an example in the [demo app](https://github.com/madoar/angular-archwizard-demo/)
| <div *ngIf="step.stepSymbolTemplate" class="step-indicator"> | ||
| <ng-container [ngTemplateOutlet]="step.stepSymbolTemplate.templateRef"></ng-container> | ||
| </div> | ||
| <div *ngIf="!step.stepSymbolTemplate" class="step-indicator" |
There was a problem hiding this comment.
Is there a reason, why we don't implement this similar to the step title?
To clarify what I mean, I would expect something like this:
<div class="step-indicator">
<ng-container *ngIf="step.stepSymbolTemplate" [ngTemplateOutlet]="step.stepSymbolTemplate.templateRef"></ng-container>
<ng-container *ngIf="!step.stepSymbolTemplate" [ngStyle]="{ 'font-family': step.navigationSymbol.fontFamily }">{{step.navigationSymbol.symbol}}</ng-container>
</div>Is this possible?
There was a problem hiding this comment.
Ng-container is a 'virtual' Angular component that does not have a corresponding element in the DOM, so [ngStyle] would not be able to put style="" anywhere and it would have no effect. Demo:
https://stackblitz.com/edit/angular5-template-oc4v8z?file=src/app/app.component.html
There was a problem hiding this comment.
Yes, you're right, thanks for reminding me :)
Is there a way to structure it a little bit better, I mean two of the four lines are almost the same...
There was a problem hiding this comment.
Good idea. Please take a look at 9651d50.
| @@ -13,11 +13,10 @@ | |||
| <ng-container *ngIf="step.stepTitleTemplate" [ngTemplateOutlet]="step.stepTitleTemplate.templateRef"></ng-container> | |||
| <ng-container *ngIf="!step.stepTitleTemplate">{{step.stepTitle}}</ng-container> | |||
| </div> | |||
| <div *ngIf="step.stepSymbolTemplate" class="step-indicator"> | |||
| <ng-container [ngTemplateOutlet]="step.stepSymbolTemplate.templateRef"></ng-container> | |||
| <div class="step-indicator" [ngStyle]="{ 'font-family': step.stepSymbolTemplate ? '' : step.navigationSymbol.fontFamily }"> | |||
There was a problem hiding this comment.
Shouldn't it be initial instead of ''?
There was a problem hiding this comment.
'initial' will override user-defined styles, which, I believe, would be an unintended behavior.
Demo: https://stackblitz.com/edit/angular5-small-demos
There was a problem hiding this comment.
Ok, so basically, if an empty string is passed to a css attribute in [ngStyle] it is ignored/removed?
There was a problem hiding this comment.
This is actually a feature of DOM API. When you assign an empty value to el.style.property, the CSS property is actually removed. Demo: https://jsfiddle.net/tcaz6kqu/
@madoar, Yes, will do today or tomorrow. |
|
For the demo, please see |
PR #144 rebased onto 'develop' branch.