Activity

1. Airblader commented on Oct 15, 2020

   

   Airblader

   on Oct 15, 2020

   Last edited by Airblader

   Contributor

   More actions

   If you need a temporary workaround you can wrap what you're passing to ngClass in $any():

   [ngClass]="$any({...})"
   
2. petebacondarwin

   added

   area: commonIssues related to APIs in the @angular/common packageIssues related to APIs in the @angular/common package

   P3An issue that is relevant to core functions, but does not impede progress. Important, but not urgentAn issue that is relevant to core functions, but does not impede progress. Important, but not urgent

   on Oct 15, 2020
3. ngbot

   added this to the Backlog milestone on Oct 15, 2020
4. jelbourn

   added

   cross-cutting: types

   on Nov 4, 2020
5. mofogasy commented on Jul 12, 2021

   

   mofogasy

   on Jul 12, 2021

   Last edited by mofogasy

   More actions

   Do you have any update on this, as this issue is still present in 12.1.0.

   Angular CLI: 12.1.0
   Node: 14.17.0
   Package Manager: npm 6.14.13
   OS: win32 x64
   
   Angular: 12.1.0
   ... animations, cdk, cli, common, compiler, compiler-cli, core
   ... forms, platform-browser, platform-browser-dynamic, router
   
   Package                         Version
   ---------------------------------------------------------
   @angular-devkit/architect       0.1201.0
   @angular-devkit/build-angular   12.1.0
   @angular-devkit/core            12.1.0
   @angular-devkit/schematics      12.1.0
   @schematics/angular             12.1.0
   ng-packagr                      12.1.0
   rxjs                            6.6.7
   typescript                      4.3.4
   
6. petebacondarwin commented on Jul 12, 2021

   

   petebacondarwin

   on Jul 12, 2021

   Last edited by petebacondarwin

   Contributor

   More actions

   I can reproduce this problem for null but not for readonly arrays and maps.

   I created a new Angular project using the CLI (12.1.1) and changed the AppComponent to be:

   @Component({
     selector: 'app-root',
     template: `
     <p [ngClass]="stringClasses">xxx</p>
     <p [ngClass]="mapClasses">yyy</p>
     <p [ngClass]="setClasses">zzz</p>
     `,
     styles: ['.a { color: red; }']
   })
   export class AppComponent {
     stringClasses: readonly string[] = ['.a {color: red}'];
     mapClasses: ReadonlyMap<string, boolean> = new Map([['a', true]]);
     setClasses: ReadonlySet<string> = new Set(['a']);
   }

   In the tsconfig.json, I added:

     "angularCompilerOptions": {
       ....
       "strictTemplates": true
     }
   

   And when I run ng build I do not get template type check errors.

   Am I missing something?
7. mofogasy commented on Jul 12, 2021

   

   mofogasy

   on Jul 12, 2021

   Last edited by mofogasy

   More actions

   I did not try for read-only arrays and maps, but values which can be undefined (and also the async pipe, because it might return undefined) it does not work, e.g.:

   @Component({
     selector: 'app-root',
     template: `
     <p [ngClass]="stringOrUndefinedClass">xxx</p>
     <p [ngClass]="observableClass$ | async">yyy</p>
     `,
     styles: ['.a { color: red; }']
   })
   export class AppComponent {
     stringOrUndefinedClass: string | undefined = '...';
     observableClass$: Observable<string> = of('...');
   }
   
   
8. petebacondarwin commented on Jul 12, 2021

   

   petebacondarwin

   on Jul 12, 2021

   Contributor

   More actions

   One workaround for the async case would be {{ (obs$ | async) || '' }}.
9. imirkin commented on Jul 10, 2022

   

   imirkin

   on Jul 10, 2022

   Contributor

   More actions

   Running into this myself with undefined when trying to enable strictTemplates... seems like a fix would be trivial. Has anyone tried submitting one and had it rejected?
10. AndrewKushnir

    closed this as completedin e2ab99bon Aug 1, 2022
11. crapStone

    added a commit that references this issue on Sep 1, 2022

    Update angular monorepo to v14.2.0 (#1523)

    ...

    a2ed02f
12. angular-automatic-lock-bot commented on Sep 1, 2022

    

    angular-automatic-lock-botbot

    on Sep 1, 2022

    More actions

    This issue has been automatically locked due to inactivity.
    Please file a new issue if you are encountering a similar or related problem.

    Read more about our automatic conversation locking policy.

    _{This action has been performed automatically by a bot.}
13. angular-automatic-lock-bot

    locked and limited conversation to collaborators on Sep 1, 2022