why does ngStyle always selectes else case in angular

Question

I have a component that uses ngStyle but it always returns the else condition even though i have checked, that fiedLand is set and after change i also try detectChanges() but it doesnt update. The span element does update and it uses fieldLang so i really dont know why.

names.component.html

<div class="item noBottom" [ngClass]="{
  'has-danger': nameEn.invalid || nameFr.invalid || nameDe.invalid || nameIt.invalid,
  'has-success': nameEn.valid && nameFr.valid && nameDe.valid && nameIt.valid
}">
<div class="d-flex" [ngStyle]="{'display': (fieldLang != 'en' && fieldLang != '*') ? 'none !important' : 'inherit'}">
   ...
</div>
<div class="d-flex" [ngStyle]="{'display': (fieldLang != 'de' && fieldLang != '*') ? 'none !important' : 'inherit'}">
   ...
</div>
<div class="d-flex" [ngStyle]="{'display': (fieldLang != 'it' && fieldLang != '*') ? 'none !important' : 'inherit'}">
   ...
</div>

names.component.js

import { Component, Input, Output, EventEmitter, OnInit, ChangeDetectorRef } from '@angular/core';
import { Subscription } from 'rxjs';
import { CacheService } from 'src/app/shared/cache.service';

@Component({
  selector: 'field-names',
  templateUrl: './names.component.html',
  styleUrls: ['./names.component.scss']
})
export class NamesComponent implements OnInit {
  @Input('disabled') editMode;
  @Input() value: MultiLangTxtModel;
  @Output() value2 = new EventEmitter<MultiLangTxtModel>();

  private fieldLang = '*';
  fieldLangSubscr: Subscription;

  constructor(private cdRef:ChangeDetectorRef, private cache: CacheService) {
    this.fieldLangSubscr = this.cache.subjectFieldLang.subscribe((l: string) => {
      this.fieldLang = l; 
      this.cdRef.detectChanges();
    });
  }

  ngOnInit() {
    if(!this.value) {
      this.value = {l10n:{de:null,en:null,fr:null,it:null}};
      // this.cdRef.detectChanges();
    }
  }

  onChange() {
    this.value2.emit(this.value);
  }
}

Move the code of your contrsuctor into your `ngOnInit` function. — , Mar 13 '19 at 08:57
plus move the code to ngInit, if you only want to change one property you can use [style.display]="condition?:'none!important':'inherit'" — Eliseo, Mar 13 '19 at 09:55

Hardik Patel · Answer 1 · 2019-03-14T05:55:22.323

0

Use an obsarvable variable and async pipe in HTML file

<div class="d-flex" [ngStyle]="{'display': ((fieldLangSubscr | async) != 'en' && (fieldLangSubscr | async) != '*') ? 'none !important' : 'inherit'}">

...

Replace constructor code as below

fieldLangSubscr: any;

  constructor(private cdRef:ChangeDetectorRef, private cache: CacheService) {
    this.fieldLangSubscr = this.cache.subjectFieldLang;
  }

edited Mar 14 '19 at 05:55

answered Mar 13 '19 at 09:55

Hardik Patel

3,868
1
23
37

hi that seams like a good idea but it throws errors: Uncaught Error: Template parse errors: Parser Error: Missing expected ) at column 38 in [{'display': (fieldLangSubscr | async != 'it' && fieldLangSubscr | async != '*') ? 'none !important' : 'inherit'}] in ng:///FieldsModule/NamesComponent.html@36:20 ("
][ngStyle]="{'display': (fieldLangSubscr | async != 'it' && fieldLangSubscr | async != '*') ? 'none !i"): ng:///FieldsModule/NamesComponent.html@36:20 Parser Error: Missing expected ) at column 38 in [{'display': (fieldLangSubscr | async....
– Andreas Owen Mar 14 '19 at 05:20
i can just use one IF segment and then is sais missing "}" instead so... weird – Andreas Owen Mar 14 '19 at 05:24
that fixed the compilation error but it doesnt quite work. if i set background it works but for some reason it doesnt accept "display" – Andreas Owen Mar 14 '19 at 07:23
i found it out because you gave me an idea. it was the !important that wasnt accepted for some reason. – Andreas Owen Mar 14 '19 at 07:31

why does ngStyle always selectes else case in angular

1 Answers1