Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
Support Async Pipe for the icon attribute
See original GitHub issueWhen using something like this <fa-icon [icon]="icon | async"></fa-icon> the component crashes on the first emit of null and doesn’t go on if the icon changes in a later state. I would be nice if the component would not throw errors on null icons and just show the not available placeholder or something similar.
Issue Analytics
- State:
- Created 5 years ago
- Reactions:2
- Comments:7 (2 by maintainers)
Top Results From Across the Web
using async pipe to the property on template - Stack Overflow
MyData object has property firstName which I want to represent inside template using async pipe. I tried with <input required [ngModel]="data.
Read more >Handling Observables with NgIf and the Async Pipe
In this article you'll learn how to use Observables with Angular's NgIf, using the async pipe and practices. Our friend NgIf has a...
Read more >AsyncPipe - Angular
The async pipe subscribes to an Observable or Promise and returns the latest value it has emitted. When a new value is emitted,...
Read more >How to avoid multiple async pipes in Angular | by Yury Katkov
TL;DR: make sure that you don't expand the same observable more than once in your async pipes. Use ngIf trick for observable expansion...
Read more >Is async pipe the norm? : r/angular - Reddit
I like her examples of using the built in async pipe to handle the ... I like to declare a property on the...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
You could rewrite your code to:
<h1 *ngIf="icon | async as nonAsyncIcon"><fa-icon [icon]="nonAsyncIcon"></fa-icon> angular-fontawesome template</h1>as documented here: https://angular.io/api/common/NgIf#storing-conditional-result-in-a-variable
Reproduced here: https://stackblitz.com/edit/angular-z8v4ux-memw8j