Is there a way to perform type narrowing within an Angular template?

I'm facing an issue with a component that requires a business object as an Input. Within the template of this component, I need to conditionally display some content based on the presence of a property that only exists in certain subclasses of the business object.

export class Thing { public foo: string; }
export class SubThing extends Thing { public bar: number; }

// ...
export class MyComponent {
  @Input() thing: Thing;
}

<!-- template file -->
{{ thing.foo }}
<div *ngIf="thing?.bar > 10">Conditional content...</div>

In the past, this setup worked fine due to a lack of strict type checking in the templates. However, with the AOT compiler, things have started to break because the compiler can't verify if thing?.bar is valid when it only recognizes thing as a Thing and not a SubThing.

I've tried using 

*ngIf="thing instanceof SubThing && thing?.bar > 10"
, but the issue is that using instanceof in the template itself is not allowed. Is there an alternative method to check the type of thing within the template to resolve this error and regain proper type checking? (I resorted to setting my Input as any to get the build to work, but I prefer to have type checking in place if possible.)

angulartypescript

Answer №1

It appears that the compiler recognizes and respects User Defined Type Guards. By simply defining a method in my component:

export class MyComponent {
  // ...
  /** @internal */ isSubThing(t: Thing): t is SubThing {
    return t instanceof SubThing;
  }
}

<!-- template file -->
{{ thing.foo }}
<div *ngIf="isSubThing(thing) && thing?.bar > 10">
  Conditional content...
</div>

Answer №2

Update: Angular 11 seems to have resolved the issue with type guards in templates. The method described below may still be beneficial for those using earlier versions of Ivy.

In Angular Ivy, there is a workaround to enable type narrowing in a template while maintaining strict template checking. It involves creating a method in the component that checks the type and returns the object if it passes the check, or undefined if it doesn't. This method's result is then assigned to a new variable in the ngIf expression, ensuring that the new variable is of the correct type.

export class MyComponent {
   // ...
   
   public isSubThing(t: Thing): SubThing | undefined{
       return t instanceof SubThing? t : undefined;
   }
}

<!-- template file -->
{{ thing.foo }}
<ng-container *ngIf="isSubThing(thing) as subThing">
    <div *ngIf="subThing.bar > 10">
      Conditional content...
    </div>
</ng-container>

Check out the stackblitz example here: https://stackblitz.com/edit/angular-ivy-gmqkzj

Answer №3

If you're facing more complex scenarios, you may find this resource on utilizing type guards for structural directives quite helpful.

https://angular.io/guide/structural-directives#directive-type-checks

  // Ensure the template checker is aware of the context type for rendering the
  // template associated with this directive
  static ngTemplateContextGuard(
    directive: TrigonometryDirective,
    context: unknown
  ): context is TrigonometryContext {
    return true;
  }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Change object values to capital letters

Upon retrieving myObject with JSON.stringify, I am now looking to convert all the values (excluding keys) to uppercase. In TypeScript, what would be the best way to accomplish this? myObj = { "name":"John", "age":30, "cars": [ { "name":"Ford", ...

javascripttypescriptjavascript-objects

Preserving variable values across page transitions in Angular 2

I am facing an issue with my multi-page website that uses a router. I want to pass a variable value from one page to another. Here is the code snippet from my contact form page: testName:string = "hello"; ngOnInit() { this.dataService.Stream ...

angulartypescriptrxjs

Retrieving an array of objects from a JSON file using Angular 2

I am encountering an issue where the class is not filled properly in an object obtained from a JSON array, resulting in an 'undefined' error. Here is the code snippet for retrieving the object: getFeatures() { return this.http.get('h ...

jsonhttpangulargetjson

Implementing strong security measures for Angular and .Net Core APIs using Azure AD authentication and defining specific application roles

My system is a combination of Angular front end and .Net Core API back end. Both are set up as distinct Active Directory apps in the Azure Portal. As a result, both applications are protected by Azure AD. The API is exposed and interacted with by authenti ...

c#angularazureazure-active-directory

Leverage and implement a reusable class in Typescript

In a React Typescript project, I am facing a challenge. I want to utilize a base class component and add an additional property to its State. After attempting to modify the class from class ErrorBoundaryW extends PureComponent<any, State> {...} to ...

reactjstypescript

Implementing automatic selection for MUI toggle buttons with dynamic data

By default, I needed to set the first toggle button as selected import * as React from "react"; import { Typography, ToggleButton, ToggleButtonGroup } from "@mui/material"; export default function ToggleButtons() { const dat ...

reactjstypescriptmaterial-uitogglebutton

Step-by-step guide: Mocking a fetch request in Jest using React with TypeScript

In my project, I am developing a react+ts application which allows users to search for other users using the GitHub API. The search input element in my app has the following structure : <input type="text" placeholder="Search us ...

reactjstypescriptjestjsfetch

Experimenting with Font Awesome Icons Module to test components

In my current Angular 6 project, I have integrated several new font-awesome 5 icons using the Fort-awesome module for Angular. However, this integration is causing some of my Unit Tests (Karma + Jasmine) to fail as they are unable to render the fa-icon sel ...

angularunit-testingkarma-jasmine

What is the best way to bring a module into an Angular project?

I have a project in Angular with an additional module created as an npm package. The structure of the module is as follows: --otherModule --other-module.module.ts --index.ts --package.json index.ts: export { OtherModule } from './other-module ...

javascriptangularnpm

"Integrating Laravel 5.4 Backend with Angular 5 Frontend: A Step-by-Step

Currently, I am immersed in a project that involves creating a frontend using Angular 5 and backend business logic using Laravel 5.4 with MySQL Database. As someone new to this technology stack, I find myself grappling with establishing the data flow conne ...

javascriptangularlaravelangular5

How to effectively handle null values using try..catch statement in typescript

As a beginner, I am learning how to write a try/catch statement in TypeScript. My issue is that there is a function within the "try" block that returns null. How can I implement code in the "catch" block specifically for when the function in "try" returns ...

typescriptnulltry-catch

Dealing with nullable properties in Typescript

In my React Component code snippet, I am facing an issue with an optional field that needs to be initialized as undefined. This is causing difficulties when trying to use it after type checking. The problem arises in the context of using typescript version ...

reactjstypescript

Transmitting form data inputted by the user to a modal that resides in the same component, all without the need for child or parent components or

In need of a solution where users can input answers to questions and have all the entered data displayed in a popup alongside the respective question. If a user chooses not to answer a question, I do not want that question or any related information to be ...

htmlcssjsonangulartypescript

Interacting between Angular 2/4 components via a shared service

Two components and one shared service are being used in the scenario: The parent component is responsible for displaying all companies, while the child component contains a removeCompany method. The issue arises when the removeCompany method is called fr ...

angular

Can you demonstrate how to showcase images stored in an object?

Is there a way to properly display an image from an object in React? I attempted to use the relative path, but it doesn't seem to be working as expected. Here is the output shown on the browser: ./images/avatars/image-maxblagun.png data.json " ...

reactjstypescriptobject

Using AngularJS component as a module within Angular 8 framework

We have an AngularJS application (let's call it x) that was previously utilized as a directive in our other AngularJS applications. With our switch to Angular 8 for our new projects, we need to continue using the same AngularJS component (x). Is there ...

angularjsangularangularjs-directive

Troubleshooting Angular: Investigating why a component is failing to redirect to a different route

I am currently implementing a redirect to a new route upon logging in using the following code: this.router.navigate(['/firstPage']); Oddly enough, when my application is initially loaded, this redirection does not occur automatically after logi ...

angularangular-routing

Using redux action in the onPaginationChange function instead of setPaginationState in the given example for the TanStack table - is there a way to

Provided this sample Is there a way to utilize by dispatching a redux action rather than using useState - setPaginationState? onPaginationChange: state => dispatch(browseItemModalActions.setPagination(state)) An error is appearing in the console: ...

typescriptredux-toolkitreact-table

The term 'Pick' is typically used to identify a specific type, however, in this particular situation, it appears to be functioning as a value while attempting to expand the Pick

I'm attempting to selectively expose certain properties from an ancestor class on my descendant class. My approach involves using the Pick utility in TypeScript. export class Base { public a; public b; public c; } export class PartialDes ...

typescript

Implement Cross-Origin Resource Sharing in Angular frontend

I am facing an issue with two microfrontends running on different ports (4200 and 4201) where one frontend is unable to access the translation files of the other due to CORS restrictions. To overcome this obstacle, I created a custom loader in my code that ...

javascriptangulartypescripthttpcors