akveo / akveo/nebular

[Actions] issue with NbAction when using Fontawesome icons

Aberta
#1,017 5 comentários 0 reações 0 responsáveis Ver no GitHub
module:components needs info
Linguagem predominante
TypeScript
Estrelas
8.1k
Forks
1.5k
Métricas de merge de PRs
Nenhum PR com merge em 30d

Descrição

### Issue type

**I'm submitting a ...**

* [x] bug report
* [ ] feature request

### Issue description
NbAction with icons that change dynamically (for example to indicate toggle state) works fine when using Nebular icons, however when using Fontawesome icons it misbehaves.

**Current behavior:**
using Fontawesome icons seems to freeze icon to its initial value. In my case for toggle action to chevron-circle-down (as mentioned in code example further in description). Debugging revealed following:
```

```
Which shows that icon is getting correctly set to `fas fa-chevron-circle-up` when card is toggled to expanded state. However, instead of line
` ` it shows svg for "chevron circle down"

**Expected behavior:**
When icon of action is changed it should show changed icon in UI.

**Steps to reproduce:**
Take NbCard and add NbAction with fontawesome icon. in click operation try changing icon for this action. Icon seems to be frozen to its initial value.

**Related code:**
Consider example illustrated in code below:
HTML template:
```











```
component.ts:

```
export class SomeComponent implements OnInit {
// initial state is collapsed card hiding details.
@Input() collapsed: boolean = true;
loading:boolean = false;
// Using 'nb-chevron-down'; works as expected
cardIcon: string = 'fas fa-chevron-circle-down';

//initial card size is extra small when user toggles, card size is changed to medium to show details
cardSize: string = 'xxsmall';

// other class methods

toggleCard(): void {
this.collapsed = !this.collapsed;
// using nb-chevron-down/up works as expected
// this.cardIcon = (this.cardIcon === 'nb-chevron-down') ? 'nb-chevron-up' : 'nb-chevron-down';

this.cardIcon = (this.cardIcon === 'fas fa-chevron-circle-down') ? 'fas fa-chevron-circle-up' : 'fas fa-chevron- circle-down';

// correct Fontawesome icon string is shown in console however icon does not change in UI.
console.log(this.cardIcon);

//card size changes correctly based on toggle state i.e. clicking nbaction when card is in expanded mode changes card size to extra small
this.cardSize = (this.cardSize === "xxsmall") ? "medium" : "xxsmall";
}
}
```
### Other information:

**npm, node, OS, Browser**
```
Node: 8.1.3
NPM: 5.6.0
OS: Windows 10
Browser: Chrome, Firefox
```

**Angular, Nebular**
```
Angular: 6.1.6
Nebular: 2.0.2
```

Guia de contribuição

Abrir o guia de contribuição

Avaliação

Esta issue ainda não foi avaliada.

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.