Is it possible for Angular templates to be dynamic?

In my component, I have a variable named "myVar" that determines which ng-template should be displayed. Let's consider the following example of a component template:

<div *ngIf="myVar; then myVar; else nothing"></div>
<ng-template #foo>My Foo-Content</ng-template>
<ng-template #nothing>No Content</ng-template>

Is there a way to make this setup work? I want "myVar" to either be null or equal the name "foo", but the current code doesn't evaluate "myVar".

Alternatively, is there a workaround for this issue? In my actual application, I have around 10 different values for "myVar", but the content isn't sufficient to justify creating separate components.

Do I really need to create 10 different *ngIf's for this scenario? :(

angulartypescriptangular6angular-ng-if

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

Creating table structure dynamically using Node.js

I'm attempting to automatically create a table using nodejs "@google-cloud/bigquery": "^3.0.0" with the following approach: const bigqueryClient = new BigQuery(); schema = `driverId:string, passengerIds:(repeated string), pickedUp:(repeated s ...

node.jstypescriptgoogle-bigquery

Challenges arise when employing reduce with data types in an object

I want to transform an object in a function so that all keys are converted from Camel case to Pascal case. My Declaration: export interface INodeMailerResponseLower { accepted: string[]; rejected: string[]; envelopeTime: number; messageTim ...

typescript

What is the best way to access the original observed node using MutationObserver when the subtree option is set to

Is there a way to access the original target node when using MutationObserver with options set to childList: true and subtree: true? According to the documentation on MDN, the target node changes to the mutated node during callbacks, but I want to always ...

javascriptreactjstypescriptdommutation-observers

Dynamic import of a SASS file in VueJS using a variable such as process.env

Is there a way to dynamically import a file using environment variables? I want to include a specific client's general theme SCSS to my app.vue (or main.ts) I'm thinking of something along the lines of: <style lang="sass"> @import"./th ...

typescriptvue.jsimport

Error shown in console when using Angular 7 FormControlName

My webpage has a reactive form, but I keep encountering an error message that states: ERROR Error: formControlName must be used with a parent formGroup directive. Make sure to include a formGroup directive and pass it an existing FormGroup instance (you ...

angularformstypescript

Creating a component with the name "c-name" is not possible because the specified module does not exist

Current working directory /src/app Directory of app.module.ts /src/app/app.module.ts Adding a new component to this directory catalog/single/configurator/[new component here] Attempt #1 to add a component ng g c catalog/single/configurator/details-popo ...

angularangular-cliangular-cli-v6

Is it possible to determine the type of a class-type instance using class decorators?

Explore this example of faltering: function DecorateClass<T>(instantiate: (...params:any[]) => T){ return (classTarget:T) => { /*...*/ } } @DecorateClass((json:any) => { //This is just an example, the key is to ensure it returns ...

typescript

Is there a way to execute a code snippet just once when focusing on a specific field?

<form id="myForm"> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname"><br> <label for="mname">Middle name:</label> ...

javascripthtmltypescript

Accessing the form element in the HTML outside of the form tag in Angular 2

I am attempting to achieve the following: <span *ngIf="heroForm?.dirty"> FOO </span> <form *ngIf="active" (ngSubmit)="onSubmit()" #heroForm="ngForm"> <div class="form-group"> <label for="name">Name</label& ...

htmlangulartypescript

The Vue event was triggered, however there was no response

My current project consists of a Typescript + Vue application with one parent object and one component, which is the pager: //pager.ts @Component({ name: "pager", template: require("text!./pager.html") }) export default class Pager extends Vue { ...

typescriptvue.jsvuejs2vue-component

Unable to access the inner object using key-value pair in Angular when working with Firebase

Within my json object, there is an inner object labeled data, containing {count: 9, message: "9 sites synced"} as its contents - also in json format. My objective is to extract the value from message, rather than count. Provided below is the temp ...

javascriptangularfirebasekey-value

Create the accurate data format rather than a combination in GraphQL code generation

In the process of migrating a setup that mirrors all the types exactly as on the server to one based solely on the document nodes we've written. Currently, the configuration is in .graphqlrc.js /** @type {import('graphql-config').IGraphQLCo ...

typescriptgraphqlcode-generationgraphql-codegen

Ensuring the completion of all validations in Angular 4

Currently, I'm working on a project that involves 3 FormControls. I am in need of a validation process that ensures either all three have values selected or none at all. Is there a method to achieve this type of validation? ...

angularangular-reactive-forms

The Angular API request is continuously retrieving data every single second

I recently inherited some Angular/ng-bootstrap code that included a table with static data, which was functioning perfectly. However, the requirement now is to fetch the data from an API call. In an attempt to modify it accordingly, I referred to an answer ...

angularrxjsbootstrap-5angular-ui-bootstrap

Material-UI - TypeScript - Autocomplete utilizing getOptionLabel and renderOption for optimized selection functionality

I am attempting to showcase member and company using MUI Autocomplete. I have an array called suggestion that contains the options to display. [ { "__typename": "Member", "id": "ckwa91sfy0sd241b4l8rek ...

node.jsreactjstypescriptmaterial-ui

Do not generate authentication code in JHipster using the --skip-server flag

Is there a reason why the authentication part is lost when generating a project with '--skip-server'? yo jhipster --skip-server It seems that upon generating the project without the server, the authentication gets affected (on AJS/A2). Is thi ...

angularjsangularjhipster

Using Vuetify to filter items in a v-data-table upon clicking a button

My table structure is similar to this, I am looking to implement a functionality where clicking on the Filter Button will filter out all items that are both male and valid with a value of true. users = [ { name: 'ali', male: true, valid: ...

typescriptvue.jsnuxt.jsvuetify.js

becoming a member of cdk scroll strategy notifications

In the process of creating a unique service that generates cdk overlays, I am faced with the challenge of listening to cdk scroll strategy events. Specifically, I am interested in detecting when the cdk closes an overlay using the "close" scroll strategy. ...

angularoverlayangular-cdk

Tips for refreshing a React component using incremental changes retrieved from an API

I am developing a unique React application using Next.js and TypeScript, with an api-backed data set in one component that needs to be cached indefinitely. Unlike traditional examples I have found online, my component must: Fetch only the most recent 100 ...

reactjstypescriptnext.jsreact-state

Angular 7 routing glitches causing page refresh issues

Here is the issue I'm facing: I am looking for a way to switch between tabs in my navigation bar without having to refresh the entire website. I have just started working with Angular and I believe that the router should be able to route to a new pag ...

angularhtmlroutesfrontendangular7