Questions tagged [angular-template-variable]

Use this tag for questions related to the Angular template reference variables. This is a concept from the (new) Angular Framework (not AngularJS)

A template reference variable is often a reference to a DOM element within a template. It can also be a reference to an Angular component or directive or a web component.

In order to create a template reference variable, use the hash symbol (#) to declare a reference variable.

Example:

The following #phone declares a phone variable on an element.

<input #phone placeholder="phone number">

Documentation: https://angular.io/guide/template-syntax#template-reference-variables--var-

31 questions
9
votes
5 answers

Assign a value to a variable in the template - Angular7

There are toggle two button (edit and submit), which button should work like toggle show/hide style on click
6
votes
1 answer

ngFor - Can't bind to 'testid' since it isn't a known property of 'input'. how to concat id with string?

I am trying to add the index value with my ids. but getting an error as: Can't bind to 'testid' since it isn't a known property of 'input'. here is my template:
5
votes
1 answer

Get the ElementRef from the Template reference variable in Angular

In the following code The #myRef1 will be an ElementRef, and #myRef2 will be MyCustomAttributeComponent directive. Basically, it implicitly finds the first component and associates it to the…
jsgoupil
  • 3,788
  • 3
  • 38
  • 53
5
votes
4 answers

Angular reference # vs ngModel

I wonder when do I have to use [(ngModel)] on my input and when I can just use #reference For example
4
votes
1 answer

angular - declare result of pipe as local variable

I'm using ngx-pipe's percentage pipe twice in a label. Once to determine which color class (success or info) and once to display the percentage.
4
votes
2 answers

Identify specific Angular TemplateRef from a QueryList

In Angular 6/7, I have a component into which I am projecting content like so (ParentComponent template): ... ...
BeetleJuice
  • 39,516
  • 19
  • 105
  • 165
2
votes
2 answers

How to update the styles of @ViewChildren (Or @ContentChildren) in Angular(v14)

I'm trying to create a carousel component that has n amount of child components based on whatever size list it will get. I want the parent (carousel) to control the styling for children as it manipulates the size of the list and track the indexes to…
2
votes
1 answer

Angular ngIf: Identifier 'length' is not defined

My component has the property transfers$ that is an observable that can comes with an array or an object that contains the error message. I can only input [items] when transfers$ is Transfer[]. But even using condition
2
votes
1 answer

Angular: how do I access the reference variable which is in a ng-template

Is there a way to access #interface, which is declared inside ng-template element? I must put the
2
votes
1 answer

Angular *ngIf="data$ async as data && data.payload; else noContent"

I want to conditionally show a block only if it contains data, otherwise I will show a noContent block. the data is fetched from the server. {{data.payload |…
2
votes
0 answers

Angular custom template interpolation breaks with curly braces

I'm new with Angular and I can not find and answer to my question. I want to change the Angular interpolation to make it compatible with Smarty templates, so I changed the default ['{{','}}'] to ['[[',']]'], or ['[',']'] but if template contains…
1
vote
0 answers

How to getting a reference to elements within the container of an angular structural directive

I have the following template with a test structural directive called *appUnless:

Inside of my structural directive, so far I have this: import { Directive, …
user1902183
  • 3,203
  • 9
  • 31
  • 48
1
vote
1 answer

What is the cost of watching a template reference value in Angular

Currently using Angular 8, ended up with a code like this.
...
Is this a hit to performance, if it is, how can we get a better implementation.
Jalu
  • 332
  • 3
  • 13
1
vote
3 answers

Angular: radio button [checked] not set with template reference variable

As the title suggests, I have a scenario where, if the "Select All" radio button is checked, it must check all of the radio buttons in the columns below. Unfortunately, this is not working. Here is a sample: …
monstertjie_za
  • 7,277
  • 8
  • 42
  • 73
0
votes
0 answers

Display Html element according to a template variable

An HTML template of my application has 3 div Each of these divs has a specific template variable. Let’s assume the following code:
Some content 1
Some content 2
Olivier
  • 343
  • 2
  • 16
1
2 3
Role