Stack Overflow
Stack Overflow

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
0
votes
1 answer

How to create template reference inside the `ngFor` loop with angular?

i am trying to create template reference through ngFor loop. but not works. ts file: import { Component, VERSION } from '@angular/core'; @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: [ './app.component.css'…
3gwebtrain
  • 14,640
  • 25
  • 121
  • 247
0
votes
1 answer

angular ViewChild isnt working inside a ngIf statement

I am trying to show student data in a table according to a selected course in my app.componenet.html:
pocketGod123
  • 27
  • 4
0
votes
1 answer

Angular list grouped by initial letters OR re-assign variable in template problem

In Angular I have a long list of words which I display in template as
  • using *ngFor loop. Because the list is so long, I want to make sections by initial letter. The list is already sorted alphabetically. Usually I would have a variable for…
    • Wintermute
    • 394
    • 4
    • 19
    0
    votes
    1 answer

    How can I bind multiple actions to a single Angular output?

    How can I bind multiple actions to a single Angular output, without creating any additional methods? An example would be updating the value of a formControl based on an output from a custom component and also marking that formControl as dirty.
    Matt Saunders
    • 3,538
    • 2
    • 22
    • 30
    0
    votes
    2 answers

    Add template reference variable attribute to element if first Angular

    I have a mega nav menu that is made by looping through a JSON response from server. I want to add a #first template reference variable to the first a tag. (This is so that I can access it from its parent component to add focus to that link if a…
    Andrew Koper
    • 6,481
    • 6
    • 42
    • 50
    0
    votes
    0 answers

    Expression has changed after it was checked - ngTemplateOutletContext

    I'm using angular v9. I'm creating a component and the parameters is a list of items and a callback, in ngOnInit, i call the function group and i reduce the items parameter, and every item, i call the callback and in my app i just return the item i…
    Lucas Buchalla Sesti
    • 345
    • 1
    • 3
    • 20
    0
    votes
    1 answer

    What is wrong with Angular's logical OR in option attribute? When [(ngModel)] is used in select the [selected] attribute doesn't affect the selection

    I have an option in select like this: When I have any possible value of impulse and isTraining is true my expectation is that the current option will be selected by default…
    Eljah
    • 4,188
    • 4
    • 41
    • 85
    0
    votes
    1 answer

    Angular 2+ NgOnInit assigning value to input array but throws an error of undefined

    I have a component which expects some inputs, the input that i care about is the feedList. In the feedList there are feed objects with their own data filled in. However, depending on the feed sometimes some data are not provided when the object is…
    Csibi Norbert
    • 780
    • 1
    • 11
    • 35
    0
    votes
    0 answers

    change content of programmatically from a component

    EDITED i got reference to a by a template variable in its component. Logs Group @ViewChild('templateLogGroup') templateLogGroup : TemplateRef; Now, how can i change the content dynamically in a…
    pinale
    • 2,060
    • 6
    • 38
    • 72
    0
    votes
    3 answers

    How to refer a funtion as a template variable in Ionic Angular app?

    I have an Order object and a Customer Object. The JSON payload for the Order object is like the following: { "order_number" : 1, "customer_id": 1 } And this is the JSON payload for the Customer object { "customer_id": 1, "customer_name" :…
    Reactive_learner
    • 417
    • 1
    • 4
    • 21
    0
    votes
    1 answer

    Angular form *ngfor with template variable and two way binding

    I have looked into several posts with this kind of problem but did not find a solution. description: Everything is shown with the last object value "profession" on init (model.overview : IOverview) Binding seems to work when I change it. Template…
    rufreakde
    • 542
    • 4
    • 17
    0
    votes
    1 answer

    Surplus space between the variable and dot in Angular, how can I clean up it?

    I have a condition block with ng-container in my Angular html template. The rendered html contains unexplained space for me, how can I work it around? The template part:
    Eljah
    • 4,188
    • 4
    • 41
    • 85
    0
    votes
    3 answers

    How to convert string to an template reference instance?

    I'm setting up ngTemplateOutlet inside *ngFor like in below code snippet
    Where list = [ {type: 'templateOne'}, {type:…
    Rakesh Maddala
    • 13
    • 1
    • 8
    -1
    votes
    1 answer

    Rewrite angular directive which uses template variables

    I've written a structural directive which sets the itemTemplate on my custom Select2Component @Directive({ selector: '[bsItemTemplate]' }) export class BsItemTemplateDirective { constructor(private select2component: BsSelect2Component,…
    Pieterjan
    • 2,738
    • 4
    • 28
    • 55
    -1
    votes
    1 answer

    How can I get access to a template generated local variable to component code?

    Maybe I'm thinking in the completely wrong direction. But what I would like to do is call the value of a variable, which was defined in the template, in the component.
    Lars
    • 920
    • 1
    • 14
    • 34
    1
    2
    3