Displaying a div within the template based on the type of input parameter

Currently, my situation involves a class hierarchy setup:

https://i.sstatic.net/qnOzA.png

Within the Angular App, I have a Component in which I take a process as input: 

@Input() currentProcess: Process

I wish to display a different div in the template based on the specific type of this process (either ProjectProcess or EmployeeProcess). While I could achieve this by using instanceof and setting a boolean variable to check with *ngIf in the template, I am unsure about this approach. Is there any other method or better solutions available?

Thank you for your assistance!

angulartypescript

Answer №1

Ensure cleanliness by utilizing getters:

get isProjectProcess() { return this.currentProcess instanceof ProjectProcess; }
get isEmployeeProcess() { return this.currentProcess instanceof EmployeeProcess; }

This approach offers the benefit of automatically updating your boolean values throughout the lifecycle, eliminating the necessity of implementing onChanges.

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

Module for importing text without verifying types using wildcards

Here is a unique module definition using the wildcard character: declare module 'custom!*' { const data: string; export default data; } Check out how it's imported: import * as myData from 'custom!./myCustomData.txt'; B ...

typescript

How can I convert an object to JSON using JSON.stringify and ensure its type is recognized as JSON?

When I attempt the following code snippet: import { MyType } from 'somewhere'; class MyClass { myObj: MyType = new MyType(); updateObject(newVal: string): void { myObj.thing = newVal; this.saveStuff(JSON.stringify(myObj ...

jsontypescript

How can I arrange a table in Angular by the value of a specific cell?

Here's the current layout of my table: Status Draft Pending Complete I'm looking for a way to sort these rows based on their values. The code snippet I've been using only allows sorting by clicking on the status header: onCh ...

htmlangulartypescriptangular-material

Using Angular - Executing a query only when a URL parameter is present

Can I execute this query only if a URL parameter (paramOne) is present? queryAndSubscribe(){ this._subscription = this._activatedRoute.params.pipe( tap (params => { console.log('params = ', params); }), switchMap ...

angularurl-parameters

What sets a module apart from a script?

As I delve into the depths of TypeScript documentation to grasp the concept of modules, particularly ES6 modules, I stumbled upon some interesting insights. typescript-modules - this documentation talks about typescript modules and highlights an important ...

javascripttypescriptes6-modules

Unexpected behavior with HashLocationStrategy

I am currently tackling a project in Angular2 using TypeScript, and I seem to be having trouble with the HashLocationStrategy. Despite following the instructions on how to override the LocationStrategy as laid out here, I can't seem to get it to work ...

typescriptangular

Uploading images with Angular, Node.js, and MySQL

Is there a way to upload an image to a MySQL blob field using node.js, and then use Angular to display it as an image? I'm looking for suggestions on how to accomplish this. Any ideas? ...

mysqlnode.jsangularblob

It only takes half a minute for ts-node-dev to set up its watchers

Having tried both ts-node and ts-node-dev, I am frustrated by the fact that they take almost the same amount of time to start my app server. This issue has been a recurring problem for me, with no successful attempts at resolving it. Currently, I am opera ...

node.jstypescriptdockerstartupts-node-dev

Tips for creating a type-safe union typed save method

My goal is to build a versatile http service that includes a method like save(value), which in turn triggers either create(value) or update(value). What sets this requirement apart is the optional configuration feature where the type of value accepted by c ...

typescripttypescript-typingstypescript-genericstypescript-class

The functionality of ngClass in NativeScript with Angular is malfunctioning

In my current setup, I have a DockLayout alongside two css classes. Even though I am changing the state.sideDrawer.isOpen property, the element's class remains unchanged. Strangely enough, when I console.log the class, it seems to be stuck on the init ...

angularnativescriptng-class

Why does it seem like Typescript Promise with JQuery is executing twice?

Figuring out Promises in Typescript/JS seemed to be going well for me, but I've hit a roadblock. I've set up Promises to wait for two JQuery getJSON requests to finish. In my browser, when connecting to a local server, everything functions as ex ...

jquerytypescriptpromisegetjson

Insight into Typescript types through dot notation

Here is the interface I am working with: export interface IRenderStruct { type: string; props: { className?: string; children?: (string | IRenderStruct) | (string | IRenderStruct)[]; [propName: string]: any; }; } The objects created bas ...

typescript

Angular 16 facing compatibility problems with Apollo-angular and React dependencies

I have integrated apollo-client into my Angular 16 project. "@apollo/client": "^3.8.7", "apollo-angular": "^5.0.2", "graphql": "^16.8.1", This snippet shows how the providers array is ...

angularapollo-clientapollo-angular

Flow error: Unable to access the value of this.props.width as the property width is not defined in T

In my React Native project, I am utilizing Flow for type checking. For more information, visit: I currently have two files named SvgRenderer.js and Cartoon.js where: Cartoon extends SvgRenderer Below is the source code for both of these files: SvgRend ...

javascripttypescriptreact-nativejsxflowtype

NG0900: Issue encountered while attempting to compare '[object Object]'. Please note that only arrays and iterable objects are permitted for comparison

Experimenting with an Angular project where I am retrieving data from a Minecraft API and displaying it on my website. This is my first time working with Angular's HTTP requests. Encountered the following error code; NG0900: Error trying to diff &apo ...

angulartypescriptangular-httpclient

Making changes to a property within a class does not automatically reflect those changes in the corresponding view

In my Typescript (.ts) file, this is the code I have: private today: Date = new Date(); And this is the corresponding HTML: <span [innerText]="today | date:dateFormat"></span> Everything displays perfectly, showing 22nd May. Now, I&apos ...

angulartypescript

The TypeScript autocomplete feature is displaying two cars when I only need one

I am currently working with two props, one named car and the other named allStations. Whenever I press car, I am getting car.car as autocomplete, but I only want something like car.id, not car.car.id. Could someone please help me figure out what I am doi ...

typescript

Eliminate redundant choices in the selection dropdown

I utilized Angular 5 to implement a select dropdown that is dynamically populated with data fetched from a web server. My goal is to filter out items with duplicate values of the object property DocumentGroup without relying on a mix of jQuery and Angular ...

angular

What is the most effective method to create a versatile function in Angular that can modify the values of numerous ngModel bindings simultaneously?

After working with Angular for a few weeks, I came across a problem that has me stumped. On a page, I have a list of about 100 button inputs, each representing a different value in my database. I've linked these inputs to models as shown in this snipp ...

angulartypescript

Error encountered while transitioning to Angular 6: "Declining to remove"..."lies beyond"..."and lacks a hyperlink"

As a newbie developer, I am currently working on my first app. Initially, I used Angular 5.2 to build it and now I'm attempting to upgrade to Angular 6. Following the guidelines provided at https://update.angular.io/, I executed the following command ...

node.jsangularnpmangular6