Where communities thrive

  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
Repo info
  • 10:36
    AlenSaito1 starred angular/angular
  • 09:55
    mikloshumli starred angular/angular
  • 09:50
    alan-agius4 commented #34385
  • 09:36
  • 09:36
    dinneo starred angular/angular
  • 09:30
    SetoKaiba commented #34385
  • 09:30
    alan-agius4 commented #34385
  • 09:27
    SetoKaiba commented #34385
  • 09:25
    thw0rted commented #34385
  • 09:21
    SetoKaiba commented #34385
  • 09:10
    thw0rted commented #34385
  • 08:57
    lichanglong2015 opened #44350
  • 08:53
    KhanhNQ292 starred angular/angular
  • 08:39
    indalaterre commented #20487
  • 07:47
    megant opened #44349
  • 07:44
    gjlmotea starred angular/angular
  • 06:25
    chengpeiquan starred angular/angular
  • 06:02
    AndrewKushnir commented #44348
  • 05:54
    devversion commented #44238
So now my App tests are running, and my Lib tests are running. :)

Performance question:

I started to move stream for state mangment to call to the function to get a snapshots specially when several component depends on one stream.

ie. (PoC)

someService.date$  // exposed


someService.updateDate(newDate) {
   this.state.date = newDate;
   this.dateDispatch(this.state.date = newDate);  // emit date$

now the question is... if in a component which consume this service I need the date for two component in it template, which have better performance:

  1. Make the service public and consume it (which is call in each change detection

    <cmp-a [date]="someService.getStateSnapshot().date"></cmp-a>
    <cmp-b [date]="someService.getStateSnapshot().date"></cmp-b>
  2. Async in both place (the *ngIF technique can't be used to share an async)

    <cmp-a [date]="date$ | async"></cmp-a>
    <cmp-b [date]="date$ | async"></cmp-b>
  3. Subscribe in the main component like

// Main component
someService.date$.subscribe(date => this.date = date);

// Template
<cmp-a [date]="date"></cmp-a>
<cmp-b [date]="date"></cmp-b>

or really it is not a diference?

Did anyone used the ng-packagr for inline css?
I am using background image url in my scss want to convert from svg to base 64 url .I wanted to try this https://github.com/ng-packagr/ng-packagr/blob/master/docs/embed-assets-css.md
somehow it is not working as expected
White Rabbit
I use iframe to display pdf file in my Angular website like this <iframe src='./assets/privacy_policy.pdf'></iframe> however if the user clicks on the links contained in the document they are opened in the iframe. Does anyone have any idea how to make them open in a new window or tab? Something like target="_blank". Thanks in advance!
Miloš Lapiš
@xavadu_twitter Something like:
<ng-container *ngIf="date$ | async as date">
   <cmp-a [date]="date"></cmp-a>
   <cmp-b [date]="date"></cmp-b>
Miloš Lapiš
Or the equivalent syntax:
<ng-container *ngIf="date$ | async; let date">
   <cmp-a [date]="date"></cmp-a>
   <cmp-b [date]="date"></cmp-b>
Laxmi Gurung
how easy is it to implement coderthemes for admin dashboard with angular?
as it is not the free theme, can we get the theme from coderthemes that is compatible with angular newer versions?

When using the strict mode. With strictPropertyInitialization
What would be the best way to handle @Input() with async pipes? When I would like to check / let the developer know, that it is an required Input().

Something like this, will always cause the Error to be thrown:

 @Input() title!: string;

  ngOnInit() {
    if (!this.title) {
      throw new TypeError("Input [title] is not set");
<hello [title]="title$ | async"></hello>
Miloš Lapiš
@the-ult It means that the first emitted value is undefined value => the same as it would be if not set via [title] at all.
Thomas Horner

Hello. I cannot get my app-shell to build in Angular 10. My app has a reference to the package ol which has some webworker source code that uses Blob. This causes ng run my-app-name:app-shell to fail with

× Application shell generation failed.
Blob is not defined

I have tried to do something like

import * as Blob from 'cross-blob';
globalThis.Blob = Blob;
global.Blob = Blob;

in my main.server.ts but I still get the issue, and I cannot figure out any way to resolve this.

ishu mishra
add(3).mul(5).divide(3) and output should be 5 ?
Implementation >>
let add = function(a){
return function mul(b){
return function divide(c){
return (a+b)/c
trying to implement this but not getting how to implement so that it should accept dot too
sorry a*b/c
add(3)(4) like this its working but why not with add(3).mul(3) like this
and sorry for this question which is apart from angular
ishu mishra
with currying only
good evening :)
Max Ludwig
Hi there, what linting+formatting setup are people using? So far I've only found incomplete setups, like, only for js and ts but disregarding the templates and sass.

Angular is an application that heavily uses the ReactiveX API via RxJS for handling asynchronicity. The API is deep in almost every layer of the framework: from the router to the handling HTTP.

On the other hand I have observed that the larger JavaScript ecosystem seems to be converging on async-await as the way to handle asynchronicity and little general adoption of ReactiveX patterns.

I know at some point Bel Lesh, one of the RxJS leads was pushing on having ReactiveX standardized within EcmaScript...but it seems that failed as he wrote here Observables, Reactive Programming, and Regret (https://dev.to/rxjs/observables-reactive-programming-and-regret-4jm6)

Which then leads me to wonder: was angular's decision to rely heavily on RxJS a bad bet? At the point that decision was being made, sure no one could tell how the future will turn out, but now it is increasingly looking like the larger JavaScript community won't be going the ReactiveX API route, won't this sort of box Angular into a corner of that framework that uses that quirk API nobody else really uses...

I am curious to hear what other people in the community thinks about this.

Miloš Lapiš
@finlaydotb But async-await is a synonym to make an async operation as a sync operation. It's useful in some cases but it's not certainly a replacement for observables.
Ed Cesar

Hello, I would like to use this exact component with two calendars in the material angle. I didn't find anything in the documentation, does anyone have any ideas?


Andrés Pérez
in case I'm using the async pipe to render data in my template (*ngFor="let course of courses$ | async"), what would be the best way to go about refetching the data? (this comes from an HTTP request)
Kamran Bahadori
@syedabdulaala, Sorry for the delay and thanks for your suggestion. surely it's a great idea but I don't think it's the solution, I would like to combine multiple project to a single one and create single bundle. with microfrontends it is possible to split the code, I am trying to understand if it is the ideal solution for my purpose.
Daniel Willis
@edcesar It's not exactly the same, but you can now do date ranges with Angular Material: https://material.angular.io/components/datepicker/overview#comparison-ranges
Daniel Willis

@finlaydotb While Async/await and Observables are both used for handling asynchronicity, they are otherwise not really comparable. Observable patterns are much more suited to the way Angular works; filtering/transforming/combining/etc, your sources and finally subscribing to them with the async pipe in the template.
Conforming to Observable patterns is a change of paradigm, more like FRP. It also works wonderfully with the ngrx state management library.

As an Angular developer, I see them as different tools for different jobs. The observable pattern and rxjs are esssential, while I rarely - if ever - use async/await.

hi, I updated angular 9 project to angular 11 and something is going wrong when i build the project with --prod and --base-url /whatever/
now the request url for the images which are in assets are not with the base url
it only happens on my scss paths
seems like when i set a baseHref the assets won't know this baseHref
what's the diferents between app.component.css and styles .css
Guilherme Bento Marques

Hello Guys.. I'm having a problem when I have a "*ngFor" type check, in the full mode.
https://angular.io/guide/template-typecheck, Basically my code is

<app-component *ngFor="let item of items" [item]="item" >

The type of the items is an x[] and the type of the input [item] is x, and I have the error message.. type x[] is not assignable to type x[] | Iterable<x>, any idea why I have this issue?

hello, can someone please tell me how to make shorthand imports work for library projects
in my case, my all apps where lib is imported fails to build
Ryan Pierce
@rajjaiswalsaumya I think that's done with this: https://www.typescriptlang.org/tsconfig#paths
I feel dumb for asking... but how do you type this?
type ComparerFn<T> = (a: T, b: T) => number;
// how to specify a helper is of type ComparerFn<T>? Not sure about the generic part, says cannot find T
const helper: ComparerFn<T> = (a: T, b: T) => whatever
Ryan Pierce
@DrewMoody const helper: ComparerFn<MyCustomType> = (a, b) => {}, I think.
That's one thing I tried. It doesn't work, says T doesn't exist... So it wants T to be defined sooner. I am just not sure where you'd define the generic in that event. Maybe it's a quirk of TS. Or maybe I have to give it a default of any? I don't know. I can work around it
3 replies
One more... Is there any way to do something like this?
// way to define prop as being a keyof T that has a value of string?
function stringPropertyComparerFn<T, K extends keyof T>(a: T, b: T, prop: )
Ryan Pierce
@DrewMoody Not sure about that one -- but it sounds cool. I've tried to do that recently as well and got the impression function overloads were the way to achieve that.
Gabriel Araujo
Hello, does anyone know if there is any possibility of getting an undefined NavigationTransition when router is trying to apply redirects? I'm getting this error: TypeError: Cannot read property 'extractedUrl' of undefined. Looking at the router source code (https://github.com/angular/angular/blob/master/packages/router/src/router.ts#L583) it seems like it's getting the navigation object as undefined inside the applyRedirects function. But how is that possible? I've read the source code many times already trying to figure out how could it be undefined but I haven't understood.
Could anyone help me to crack it out?
can anybody go through this stackblitz example and let me know what wrong I am doing with FormArray:
idea is to remove the old array controls, objects and insert a new one with a value
it won't let me do it.
I am using a RxWeb library, but its just a wrapper above the Angular's own Forms module. If anyone can get it to work with Angular's FormArray it would be great.
Oh - sorry, I misread - one sec...
i want to get rid of the old ones.
Daniel Willis
Check it now.
I remember having this issue before - you need to iterate over the formArray and removeAt()