2,887 questions
2
votes
2
answers
1k
views
Updating a template using signals within a @for loop is not working
I have been trying and experimenting with a load of different approaches, but I cannot seem to get it working that my template gets updated.
Currently the situation: I have an Angular 19 app, ...
- 45
1
vote
1
answer
32
views
I am new in Angular 2. I have tried to create a component but I got this error
Here's my app.component.ts file :
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
standalone: false,
templateUrl: './app.component.html',
styleUrls: ['./app....
- 11
1
vote
1
answer
137
views
Pass template and context through several child components Angular
I recently faced an issue when trying to pass a template through several Angular components.
I was not able to pass the template declared in the parent and its context to the child component at last ...
- 769
0
votes
2
answers
75
views
Need to find which Angular template is causing an error
I'm in the process of upgrading an app from Angular 8.x to 9.x (first step towards upgrading to latest), using ng update. After the update, I'm seeing the following when starting the app:
[ng] ERROR ...
- 239
-1
votes
1
answer
99
views
TemplateRef gets undefined for the nested component, when passing as content child
I have a component and im passing a template "exampleTemplate" to this component
<standard-form> <ng-template #exampleTemplate></ng-template </standard-form>
Inside the ...
1
vote
0
answers
38
views
How to achieve conditional rendering in Angular
I have this code and I want to display speakers whose role is SPEAKER in different section on the same page and those whose role is MODERATOR, and ORGANIZER in different sections on the same page ...
- 45
4
votes
2
answers
1k
views
Recursive template inside inner @for in Angular 17
I'm trying to create a recursive template an ran into a problem.
My template:
<ng-template #recursiveGroups let-groups>
@for (group of groups; track group; let i = $index) {
<!-- Some ...
- 113
1
vote
0
answers
58
views
Common directive for pagination using angular
I am working on an application where I need to apply a common directive to set the paginations but it is not working for me. Below is the code
Html Code
<p-table [value]="...
- 1,111
0
votes
1
answer
179
views
how can I inject a component inside a loop
we can inject an Angular component dynamically ViewContainerRef.createComponent() where ViewContainerRef refers to a template reference like this <ng-template #ref>
how can we achieve the same ...
- 2,316
1
vote
0
answers
136
views
Angular base href not showing up in the image URL
https://dev********.us/assets/images/login/login-bg.png
this is the actual url in the production server, in this path the images are not loading.
the reason is the base url is not appented with actual ...
- 11
1
vote
1
answer
1k
views
How do I render a component dynamically and access their methods in Angular?
I am using Angular 17 for a tiny app and I want to open different components (with forms) in a dialog window. The dialog itself is a wrapper which has two buttons, one of them should call a method of ...
1
vote
1
answer
417
views
How to wrap ngb-carousel?
I have an instance of ngb-carousel which is currently used like this:
<ngb-carousel>
<ng-template ngbSlide>Hello</ng-template>
<ng-template ngbSlide>World</ng-...
- 2,834
1
vote
2
answers
736
views
Mat-Icon not in mat-mdc-menu-item-text after angular upgrade 16 to 17
I am currently migrating from angular 16 to angular 17. Its a mat-icon to delete an entry from a list in a mat menu with some information text next to it. Before everything was aligned correctly but ...
- 69
0
votes
1
answer
603
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 ...
- 2,869
0
votes
1
answer
2k
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 ...
- 121
0
votes
0
answers
60
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 ...
- 101
0
votes
2
answers
806
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 ...
- 2,317
0
votes
0
answers
128
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-...
1
vote
1
answer
351
views
Make radio button selected by default with template driven form Angular
I have a form using a template driven form and I want to make a radio button selected by default but it doesn't work.
This is part of my code:
<div class="donut-form-promos">
&...
- 63
1
vote
2
answers
3k
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 ...
- 40.4k
0
votes
1
answer
1k
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 ...
- 4,345
1
vote
1
answer
2k
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 &...
- 91
1
vote
1
answer
3k
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
...
- 905
4
votes
2
answers
5k
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 *...
- 145
0
votes
0
answers
2k
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>
...
- 5,268
1
vote
1
answer
988
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 ...
- 127
1
vote
2
answers
1k
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="...
- 63
2
votes
2
answers
524
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 ...
- 591
0
votes
1
answer
868
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 ...
- 991
1
vote
1
answer
195
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, ...
2
votes
1
answer
2k
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}}</...
- 333
0
votes
0
answers
42
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 '...
1
vote
1
answer
2k
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....
- 831
1
vote
0
answers
722
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 ...
- 169
0
votes
2
answers
308
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 ...
- 11
0
votes
2
answers
846
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}}
- 17
1
vote
1
answer
746
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 ...
- 2,254
1
vote
1
answer
137
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 ...
- 83
4
votes
1
answer
863
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 ...
- 41
0
votes
1
answer
2k
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;
...
- 376
5
votes
1
answer
3k
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-...
- 1,497
2
votes
1
answer
2k
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, ...
- 21
1
vote
1
answer
2k
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 ...
- 197
1
vote
1
answer
1k
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 ...
- 582
0
votes
0
answers
431
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 ...
- 334
0
votes
3
answers
8k
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 &...
- 345
0
votes
1
answer
47
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 } ...
0
votes
1
answer
2k
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' ...
- 974
2
votes
0
answers
226
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 ...
- 25
2
votes
1
answer
3k
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 ...
- 4,608