Where communities thrive

  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
Repo info
  • 17:41
    SetoKaiba commented #34385
  • 17:36
    christopherthielen commented #44323
  • 17:34
    HackerXp starred angular/angular
  • 17:22
    MiguelMedeiros starred angular/angular
  • 17:15
    justyoshi starred angular/angular
  • 17:08
    AndrewKushnir commented #44269
  • 17:07
    AndrewKushnir unlabeled #44269
  • 16:45
    JoostK review_requested #44315
  • 16:44
    JoostK labeled #44315
  • 16:44
    JoostK ready_for_review #44315
  • 16:27
    JoostK synchronize #44315
  • 16:25
    adriel87 starred angular/angular
  • 16:25
    armanabkar starred angular/angular
  • 16:21
    AleksanderBodurri synchronize #43473
  • 16:20
    AleksanderBodurri edited #43473
  • 16:18
    SetoKaiba commented #34385
  • 16:10
    angular-automatic-lock-bot[bot] locked #43999
  • 16:10
    angular-automatic-lock-bot[bot] commented #43999
  • 15:58
    AleksanderBodurri edited #43473
  • 15:39
    renovate[bot] edited #44273
What was not working:
onDocumentUpdate(documentsArray: DocumentModel[]): void{
    if(documentsArray == undefined)

    var docsControls = this.contractForm.controls["TenantContractDocuments"] as FormArray;

   docsControls = new FormArray([]);

    while(docsControls.length !== 0)

    documentsArray.forEach((element: DocumentModel) => {
      let docGroup = this.formBuilder.formGroup(DocumentSubmission);
      let document = element as DocumentSubmission;

I read it on some of the answers and tried.
Its from the angular itself
Daniel Willis
Yeah, docsControl needs to remain a reference to the existing formArray
hmmm makes sense, I was reassigning it to the parent form even after initializing a new one. But that too was not working.
thanks for the help! :smile:
Daniel Willis
No worries.
Weird, .clear() is in the docs: https://angular.io/api/forms/FormArray#clear
But doesn't seem to exist. IDE/Stackblitz throws error.
yeah. there is definitely some issues with it. on my local it exists and works, but when I use it it won't update the actual main FORMGROUP.
that was where I was having hard time
this was how I was doing at another place:
    var contractedBeds = this.contractedBedsFormGroup.controls['AddContractedBeds'] as FormArray;

    //remove all the objects from form array:
    while (contractedBeds.length !== 0) {

    $event.forEach(element => {
      contractedBeds = this.formBuilder.array([this.formBuilder.formGroup(TenantContractContractedBed)]);

      let contractedBedsGroup = this.formBuilder.formGroup(TenantContractContractedBed);

    this.contractedBedsFormGroup.controls["AddContractedBeds"] = contractedBeds; //I was doing this also with an understanding may be it is loosing the reference
Daniel Willis
I think it's best to stick with referencing the original formArray and modifying it, rather than replacing it. Especially if you have any exisiting subscriptions elsewhere that might be listening to it.
Agree. I didn't do it in the start, but rather when clear and removeAt was not working, I added it. But now I have removed this line.
Daniel Willis
Cool cool.
what is wrong i this swich case ?
<input type="number" class="form-control" formControlName="{{ child.formControlName }}" />
          <div [ngSwitch]="type">
              formControlName="{{ child.type.formControlName }}"
              formControlName="{{ child.type.formControlName }}"
Tiantang Sun
should I create a component for each CRUD operation or use a single component for all?

I haven't looked into this yet, but does anyone know if you can access context of an element through ViewChildren? Specifically trying to grab context for a mat-row in a mat-table

<tr mat-row *matRowDef="let row; columns: columns"></tr>

I am hoping for access to that row context

Dominic Watson
I'm trying to debug performance issues by using Chrome Developer Tools performance recording and analysing the output.... but it's just polluted by Zone. The whole thing is basically: 100% used inside Zone. How am I meant to address performance issues if zone just wraps everything and consumes all knowledge about what's happening?
it makes everything unreadable and unusable I just can't read the output
Hi there, someone have some news about csp (content security policy)? I need to pass a dynamic nonce to inline style and script, and I cannot use unsafe inline because of internal policy, there is a way to achieve this? Extending webpack or in another way? Thanks
Wish you could use rxjs operators on component inputs
Amin Bashanfar
Hello guys, I have an input that has a card number and I want to put space between every 4 numbers how can I do that
@mlc-mlapis Interesting, thanks for the links
Pankaj Sharma
Hi im new to Angular development. Im from India. Can anyone please suggest a better way to use AMP with Angular?
Can we use angular universal for SSR purposes if the backend is in Flask?
Also are there some advantages of using EventEmitters over Subject for cross component communication?
I have built some components in angular9 that use the arrow keys to toggle dropdowns and select options. When I have NVDA (ADA Screen Reader) running my components do not receive keydown and keypress events for the arrow keys. Has anyone experienced this and can you tell me how to make this work with NVDA?
Alessandro Tagliapietra
HI everyone, is there a way to have sequential async guards? Right know when I have multiple guards returning an Observable<UrlTree> not the first guard that fails decides the redirect
Alessandro Tagliapietra
oh nice didn't find that! Thanks @mlc-mlapis
Miloš Lapiš
@alex88 :thumbsup:
Daniel Willis
@UrKr @mlc-mlapis I'm not sure I understand the use case here; you can already pass an Observable as an @Input() to a Component. What do these decorators add?
Tiantang Sun
I have a pair of input fields which stores a name and a number separately. The problem is I don't know how many pairs are needed; and the number of such pairs needed depends on a user input, e.g. if user enters 7, then I will need to dynamically generate 7 such pairs. Can someone please point how to handle this for a beginner like me? Any reference I can read?
Hi guys , how do you make Telegram authorization in angular app ? I have found one solution https://stackoverflow.com/questions/56407518/how-can-i-include-the-telegram-login-widget-in-an-angular-app . But the second asnwer code gives me Refused to frame. When I open the same iframe in browser , in browser it works
Miloš Lapiš
@danww You can do many things, including passing an observable with your logic and behavior, but @ObservableInput() concentrates on transforming a standard input into an observable input, and as a result, simplification and standardization, how and where to detect a change on such input (usually used some code in ngOnChanges or using setters, ...).
Hey can anyone tell me what I am doing wrong with my router animation? It probably is something stupid but it does not get removed before the enter transition starts and thus both components are briefly shown (also doesn't seem to use the fade in that codesandbox for some reason although it does in my actual project).
I made a codesandbox with the problem to see here https://codesandbox.io/s/nifty-river-st8wl?file=/src/app/fadeAnimation.ts
Tiantang Sun
I have a dropdown which will be used in many other templates so I put this dropdown into a single component; how do other components reference the selected value from this common component?
Miloš Lapiš
@stt106 A component has inputs and outputs usually.
Tiantang Sun
ok so I can pass the common component into other components that reference it?
Hello. I have webiste project built with angular as frontend and C# asp.net 3.x as backend.
How I setup on my local IIS?
Miloš Lapiš
@stt106 You should probably start with official docs on https://angular.io/guide/inputs-outputs.
@Acoder-Ana By the same way as your backend. The client app in a browser like SPA Angular application communicates only via XHR requests and it doesn't matter if a server-side is a remote or local host.

I would like to lazy load the Vue runtime in Angular.

I have an ng app which might (or might not) load another app. This (second) app is based on Vue and expects the Vue runtime to be already available.

Vue seems to be available as a module: https://vuejsdevelopers.com/2019/02/04/vue-es-module-browser-build/

Is it possible to lazy load this with the import().then() approach?


Kyle Then
Hi, I'm trying to get angular 11 working with webpack 5 so I can play around with module federation for micro-frontends. When I try to convert my main app over, I get an error when localhost tries to load the page from the main.ts file. Any ideas why it can't find this? It's in node modules
Uncaught Error: Cannot find module '@angular/platform-browser'
    at webpackMissingModule (main.js:11)
Matt Erman
We have api endpoints that are used outside of the project we are working on and tehy can't be changed but I am trying to implement ngRx\entity and ngRx\data to use them and am wondering if there is a way to configure those to point to the default endpoints they are expecting. Is this possible?