After a full day of research, I found this pull request on Angular CDK repository on Github. Now, since I did not know how to integrate cdkDropListGroup into my example, I decited to create an array of IDs which will be added to [cdkDropListConnectedTo]. Each instance of my second list will have generated ID, and … Read more
Try adding “allowSyntheticDefaultImports”: true to your tsconfig.json under the “compilerOptions”
Though the provided solutions work, it will be nice to have an approach which does not modify service worker code in node_modules or the generated code. The approach can be to create another script named custom-service-worker.js In this file, importScripts(‘./ngsw-worker.js’); (function () { ‘use strict’; self.addEventListener(‘notificationclick’, (event) => { console.log(“This is custom service worker notificationclick … Read more
You may use properties id and cdkDropListConnectedTo to link both lists: Component 1: <div cdkDropList id=”list-1″ cdkDropListConnectedTo=”list-2″ (cdkDropListDropped)=”drop($event)”> <div *ngFor=”let item of list” cdkDrag>{{ item }}</div> </div> Component 2: <div cdkDropList id=”list-2″ cdkDropListConnectedTo=”list-1″ (cdkDropListDropped)=”drop($event)”> <div *ngFor=”let item of list” cdkDrag>{{ item }}</div> </div> If you need to connect several lists to one list, you may … Read more
1.This error occur when there is an infinite loop. As you have mentioned that the page loads when app-heroes is commented, this might be used as selector-name for more than one component which is not allowed. This can cause an infinite loop and fail to load components. Try making below edits, hero.component.html <ul class=”heroes”> <li … Read more
You just need to add a little more config, so where you are declaring your global variables, you need to wrap it up in :root{}. So in src/styles/settings/_variables.scss. :root { –blue: #00b; // or any global you wish to share with components } Then when you use them in the SCSS you will need to … Read more
I solved my problem according to this link Add this block code to service services.AddCors(options => options.AddPolicy(“CorsPolicy”, builder => { builder.AllowAnyHeader() .AllowAnyMethod() .SetIsOriginAllowed((host) => true) .AllowCredentials(); })); and add this block code in configuring app app.UseCors(“CorsPolicy”); app.UseSignalR(routes => { routes.MapHub<General>(“/hubs/general”); });
Pretty simple this.data$ = new Observable((observer: Observer) => { observer.next(); observer.complete(); });
Best way to update a child component is: ngOnChanges() ngOnChanges(): “A lifecycle hook that is called when any data-bound property of a directive changes. Define an ngOnChanges() method to handle the changes.” We use this lifecycle hook to respond to changes to our @Input() variables. Example: import { Component, Input, OnChanges } from “@angular/core”; @Component({ … Read more
I ran into the same problem. Turns out the solution is “don’t do it”, as explained in this thread by one of the Angular guys: https://github.com/angular/angular-cli/issues/10170#issuecomment-380673276 It boils down to services being easier to tree shake when they are provided by the root module, as I gather. I’m as disappointed as you are.