Questions tagged [angular2-template]

For questions referencing Angular Template Syntax including: interpolation, input(property) bindings, output(event) bindings, two-way binding, local variables, star syntax, etc. This tag is specific to angular version 2.x and above

Filter by
Sorted by
Tagged with
0 votes
0 answers
14 views

Template context for Angular components and RouterModule

I'm learning Angular and trying to understand how RouterModule works with other modules. Say I have a simple AppModule as follows. import { NgModule } from "@angular/core"; import { ...
Eric Anastas's user avatar
  • 21.7k
0 votes
0 answers
10 views

Accessing template variable of angular-touch-keyboard in component

I am using angular-touch-keyboard component and would like to pop up it on page load. but I get an error: Cannot read properties of undefined (reading 'touchKeyboard') I have such a template: <form ...
aSa's user avatar
  • 1
0 votes
1 answer
26 views

Angular app, cannot get getBoundingClientRect of any element

I have an angular project which is half way through development, I am using SSR with universal (mentioning just in case it matters although it doest not run in dev mode), bootstap and ng-bootstrap on ...
Kravitz's user avatar
  • 2,769
0 votes
1 answer
180 views

Split comma separated string to array

I have a string of comma separated values like let options = '1, FIRST,2, SECOND,3, THIRD,4, FOURTH' Requirement: There will be a space after first comma which is next to number. I need to split comma ...
Abhikhya's user avatar
  • 121
0 votes
0 answers
28 views

Integrating Html theme into angular

I am trying to integrate a Html admin theme into new angular project. The pages are loading fine, but the toggle & click actions are not working after integrating into Angular. I am trying to ...
Sricharan's user avatar
  • 101
0 votes
2 answers
294 views

How to render custom component in parent view component?

I'd like to render custom component inside mat-option. This is the code in my parent component: <mat-option *ngFor="let option of options" [value]="option.value"> HERE I ...
tylkonachwile's user avatar
0 votes
0 answers
205 views

Angular accordion component not showing ng-template

In Angular 14, I'm trying to follow this tutorial to create an accordion component: https://codesandbox.io/s/ng-accordion-ssscp?file=/src/app/app.component.html I mostly copy pasted the directives and ...
Liran_T's user avatar
  • 71
0 votes
0 answers
15 views

Rendering template that is provided by server

Our project architect decided that they want to have html-Templates for a guide book for our users persisted in our database for version management and other reasons. Now they expect me to fetch those ...
Chund's user avatar
  • 365
0 votes
0 answers
58 views

Angular 2: how to access ngFor of keyvalues inside an array, using the index of the wrapper ngFor

*see code below in my first ngFor I am iterating over formsAr, works fine. in the second ngFor I want to access an object in an inputsOnly array, with the same index of I in the top ngFor, and then ...
Henru Olivier's user avatar
0 votes
0 answers
105 views

After angular version upgrade from 8 to 13 then "close" icon in the popup not working

<ng-template #userInfo> <div id="auth-users-roleinfo-popup" class="authorization-user-info asg-custom-background-color"> <div class="authorization-...
vaishnavi banait's user avatar
1 vote
1 answer
127 views

Make radio button selected by default with template driven form Angular

I have a form using a template driven form and I whant to make a radio button selected by default but it doesnt work, this is a part of my code: <div class="donut-form-promos"> &...
Abdel's user avatar
  • 63
1 vote
2 answers
782 views

Angular Template - Dynamically generated HTML is output as a string and not HTML

I am modifying an Angular template that is currently using innerHTML to dynamically build HTML fragments into the DOM. In this case, I am creating a mat-table and dynamically building the header. Here ...
Scott B's user avatar
  • 38.9k
0 votes
1 answer
529 views

How to negate an observable an set an alias in async pipe without losing the meaning? [duplicate]

I have a flag in order to show the data that is using an angular class property, and the value is assigned throug a subscription in observable, but I want to update the approach using async pipe and ...
Tabares's user avatar
  • 4,093
1 vote
1 answer
526 views

Type checking Angular template

I would like to use type checking on angular templates. When a property has 2 or more possible types, the template is not able to determine which is the current type in its context. Even using an &...
Mike5's user avatar
  • 61
0 votes
1 answer
291 views

Angular - ngModel is not updating the value to the component

The ngModel is not working. I'm using it with textbox. app.component.html <input type="text" [value]="name" [ngModel]="name"> Name is: {{name}} app.component.ts ...
Billy's user avatar
  • 825
2 votes
2 answers
2k views

Use ng-template in the child component from the parent component

I have the following component for render a list of options. optionsList input gets a list that needs to be rendered with a custom format provided from the item input. list-box.component.html <div *...
Adrian González's user avatar
0 votes
0 answers
1k views

How to access Elements in a Templates using TemplateRef in angular

Suppose I have an HTML structure like this <ng-template #template1> <div> element one </div> <div> element two </div> <div> ...
Lijin Durairaj's user avatar
0 votes
1 answer
444 views

Why ngFor does not need keys like in Vue and React?

I have just started with Angular couple of weeks ago. In Vue and React we always use a unique key when we render an array of elements, for a more efficient rendering, specially when the elements and ...
Mori's user avatar
  • 107
1 vote
2 answers
956 views

Angular Argument of type 'array' is not assignable to parameter of type 'string'

I have json: public example=[{ array:[item1, item2,] }, { array:[item1, item2,] }] file html: <div *ngFor="let item of example"> <div *ngIf="...
ngaotruyen's user avatar
1 vote
2 answers
334 views

Angular Modal: How to reuse the same html in modal as well as in the page

In my page whenever user clicks on the image . Whatever be on the page should be now shown in the modal. Currently I have copied the same html two times in my angular code . Is there any way we can ...
Trilok Kumar's user avatar
0 votes
1 answer
454 views

PrimeNg: Drop down list not showing saved selections

I am trying to avoid using formbuilder, i want to use 2 way binding on the data source below is my html, problem is in the p-dropdown, when the component loads I get all the drop down lists but the ...
China Syndrome's user avatar
1 vote
1 answer
159 views

Avoid duplicating *ngIf Angular 2

Calling functions inside the template causes infinite calls <div>{{ renderHtml() }}</div> The same behavior depicts inside *ngIf expression While the template has multiple expressions, ...
Sergey Vashchenko's user avatar
2 votes
1 answer
1k views

Angular get viewContainerRef of ViewRef

i have a definition of templates in my angular app: <div class="wrapper" grid [data]="data"> <div class="cell" *cellDef="let cell">{{cell.id}}</...
Draftsman's user avatar
  • 303
0 votes
0 answers
41 views

ngFor gives an error even tho I have already imported BrowserModule, and CommonModule

Error: Property binding ngForOf not used by any directive on an embedded template Error especifically occurs because of the * in ngFor. If I take out the '*' and just put 'ngFor', I get an error '...
purpleunicorn's user avatar
1 vote
1 answer
1k views

Slightly modifying base component template in Angular Component Inheritance scenario

I have an app which requires three different types of buttons (a basic button, a form button and a toggle button). Although it would certainly be possible to put everything into the same component (e....
user2768479's user avatar
0 votes
0 answers
567 views

How to pass data from parent to child in template driven form

My problem is with Template Driven Forms. I have two components (parent and child) and I want to pass default values for controls inside child component. In child component I have reference to the ...
Piotr Sternik's user avatar
0 votes
2 answers
196 views

Angular property binding without assignment

I want to create a reusable component with @Input() close = false and in the parent <my-reusable-component close></my-reusable-component>. Like material button with <button mat-button ...
Alan Choufa's user avatar
0 votes
2 answers
682 views

Angular how to wrap input value with double curly braces

What I want to achieve is that when I write inside input field "Foo" it will become {{Foo}}
brb's user avatar
  • 17
1 vote
1 answer
470 views

how to use an @Output() property inline without use a function into the controller

is it possible to use the countRitiri output property inside its parent <mat-tab> without to call a function in the current component updateCountRitiri that updates the variable countRitiri ...
pinale's user avatar
  • 2,072
1 vote
1 answer
86 views

How to raise mat-error in angular for just some specific field?

I have a form where are sub categories and save button calls mat-error correctly for all the fields in all categories in once correctly if nothing entered. But I also have add button for each category ...
Shubham Shaw's user avatar
2 votes
0 answers
562 views

Angular : matSort with ng-content within mat-table

I'm trying to create a reusable mat table component with pagination, sorting and search. the reusable component that I made displays some simple columns , and projects some custom columns depending on ...
Achraf's user avatar
  • 21
0 votes
1 answer
1k views

Angular 11 how to extend a Form from a base component using a child component

My app has many Fees. All Fees share the same attributes except a few here and there. Say I have this structure: // Base Fee interface IFee { id: string; name: string; price: string; ...
amcardwell's user avatar
2 votes
1 answer
2k views

Cannot access Enum in Angular template

My purpose is use the enum to read a array's property. This code gives me error: <ng-container *ngFor="let elem of list"> <div class="ui-g-12 ui-sm-12 ui-md-12 ui-lg-12 ui-...
poopp's user avatar
  • 1,307
2 votes
1 answer
781 views

Angular template not rendering

Right now I am creating a library (my-custom-library) and a project in which we'll use that library (called my-Project) The requirement is, that within my-project I have to use my-custom-library, ...
sommma200's user avatar
1 vote
1 answer
1k views

Pass angular components as array to html template

Context :-Small Angular Application(only two tabs on single screen) deployed independently as static assets in AWS S3 bucket. Given :- One of my Angular(12) container Component have long markup, but ...
Niteesh Bhargava's user avatar
0 votes
0 answers
692 views

How to lazy-load an Angular component from an html template?

I have an existing Angular app which eager-loads everything, and I would now like to add lazy-loading capabilities to it. Lazy-loading routes works fine, especially by following the guidelines ...
bfredo123's user avatar
  • 472
0 votes
0 answers
399 views

Child Component with structural directive (*ngif) is always executed last despite being placed ahead in the Parent Component html

I was working on a app where I encountered a peculiar case. For simplicity I have created a sample app and tested this although the behaviour was same. Sample app: In the parent component(my-app) I ...
Jason's user avatar
  • 335
0 votes
3 answers
5k views

How to set different css class based on screen size in Angular?

I have this floating button in my Angular Application, <button [ngClass]="{ 'mdc-fab--extended': extendedClass, 'mdc-fab--mini': miniClass }" class="mdc-fab mdc-fab--touch &...
julz oh's user avatar
  • 285
0 votes
1 answer
37 views

No overload matches this call. angular2 to angular12

I am upgrading my Angular-2 project to Angular-12 project and when I changed : Before import { Http, Response, Headers } from '@angular/http'; After import { HttpClient, HttpResponse, HttpHeaders } ...
Usama Attique's user avatar
0 votes
1 answer
1k views

Angular 2 error TS2339: Property 'posts' does not exist on type 'BookComponent'

I am learning Angular 2 and am currently blocked by the following error. The variable posts is declared in post.component.ts. Error: src/app/book.component.html:231:33 - error TS2339: Property 'posts' ...
Lee Z's user avatar
  • 802
2 votes
0 answers
194 views

Access child type's properties from Angular template

I suspect this question has already been answered, but all answers I can find are about child components, not child types. I have two interfaces. (edit to clarify: I do have more items that inherit ...
Erian's user avatar
  • 23
2 votes
1 answer
2k views

Angular ngStyle Parser Error: Unexpected token [, expected identifier or keyword

I need to be able to pass a dynamic string using the fieldName in order to get an attribute within the item object. In order to make it easy to duplicate the issue I have given a small example. The ...
Dilshan Liyanage's user avatar
0 votes
1 answer
171 views

NG0303: Can't bind to 'ngIf', even after importing CommonModule

I know this have been posted a lot of time, but still not able to make it work. Have 2 modules: AppModule and ModulebModule. In AppModule: @NgModule({ declarations: [ AppComponent, ], ...
NestorArturo's user avatar
  • 2,486
0 votes
0 answers
397 views

Angular Dynamic Component not Loading in build

I have a requirement to render HTML coming from DB. So I created a dynamic component at runtime and passing the HTML in it. Then I created a dynamic module and passed this dynamic component class to ...
Amit Singh's user avatar
0 votes
1 answer
146 views

Angular HTML Binding is not working when we removed HostListener

to make change detection lesser, we replace hostlistener with from event from RXJS and runoutside of angular. this is how my angular code looks like ngOnInit() { this.windowKeyDown(); // this....
carihep's user avatar
-1 votes
1 answer
62 views

how to factor these two angular elements into a single conditional angular template

I'm currently displaying image layers or text layers using the following angular template <div *ngFor="let layer of getLayers()"> <img *ngIf="(layer.type === layerType....
Mauricio Gracia Gutierrez's user avatar
-1 votes
1 answer
2k views

Can't bind to 'settings' since it isn't a known property of 'angular2-multiselect'

Everybody I am trying to use angular2-multiselect and have issue. My angular version is 11 This is issue message Error: src/app/main/stores/stores-list/new-stores-sidebar/new-stores-sidebar.component....
Shen's user avatar
  • 55
0 votes
2 answers
460 views

How to use [(ngModel)] in ngFor with dynamic Name (Key)

I have angular form that are generated by NgFor on two different div. i want to make form fields unique. both fields are not working individually <div *ngFor="let configField of configFields; ...
Cristopher Sneil's user avatar
0 votes
1 answer
2k views

How to reset the table data to what it was before it was edited in template-driven form Angular 12

So I have a table of user data that is editable after clicking on the edit hyperlink. When it is pressed the cancel and submit buttons appear. Cancel should make it so that the row is no longer ...
Marco Antonio Martinez's user avatar
0 votes
1 answer
671 views

How to edit table row only when edit is clicked in template-driven form Angular 12?

I have my table that is editable by clicking on a hyperlink and a button to save the updated data. I click edit and what I want to happen is for the row on which the edit link is clicked on that row ...
Marco Antonio Martinez's user avatar

1
2 3 4 5
58