Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • 18:55
    denvernaidoo starred angular/angular
  • 18:39
    JoostK synchronize #42492
  • 18:18
    shaher commented #35924
  • 17:28
    andrewferraz starred angular/angular
  • 17:02
    shal-ae starred angular/angular
  • 16:06
    angular-automatic-lock-bot[bot] locked #42179
  • 16:06
    angular-automatic-lock-bot[bot] commented #42179
  • 16:06
    angular-automatic-lock-bot[bot] locked #42136
  • 16:06
    angular-automatic-lock-bot[bot] commented #42136
  • 16:06
    angular-automatic-lock-bot[bot] locked #42178
  • 16:06
    angular-automatic-lock-bot[bot] commented #42178
  • 16:06
    angular-automatic-lock-bot[bot] locked #42176
  • 16:06
    angular-automatic-lock-bot[bot] commented #42176
  • 16:06
    angular-automatic-lock-bot[bot] locked #42175
  • 16:06
    angular-automatic-lock-bot[bot] commented #42175
  • 16:06
    angular-automatic-lock-bot[bot] locked #42160
  • 16:06
    angular-automatic-lock-bot[bot] commented #42160
  • 16:06
    angular-automatic-lock-bot[bot] locked #42157
  • 16:06
    angular-automatic-lock-bot[bot] commented #42157
aquinn637
@aquinn637

Hi all, why would this not work in a template?

[isEnabled]="typeof image_data === 'string'"

    <Button
        class="btn-primary p-10"
        text="{{ 'clock' | translate }}"
        (tap)="clock()"
        [isEnabled]="typeof image_data === 'string'"
    ></Button>
Miloš Lapiš
@mlc-mlapis
Famous
@famousmighodaro
@mlc-mlapis at the moment I don't have <meta http-equiv="Content-Security-Policy" ... >, I am reading the link you attached to answer.
Doaa Othman
@DoaaOthman
Hi all, please I want to sharing local angular libraries without npm with my other project how can I do that
Miloš Lapiš
@mlc-mlapis
@DoaaOthman You can use Nx monorepo.
Doaa Othman
@DoaaOthman
@mlc-mlapis please could you give me suggestions of tutorial videos about it
Krishna
@krishyalla_twitter
Did anyone used the ng-packagr for inline css?
Krishna
@krishyalla_twitter
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
Doaa Othman
@DoaaOthman
@mlc-mlapis thanks a lot
alenandry
@alenandry
@itsmenabil
function multiply(a , b){
return a * b
}
shivam kumar
@Shiva7071007

Hi,
While I am debugging an angular app in vscode, my debugger is sometime stop in file \localhost:4200\main.js which is a minified file.
the debugger then hang up because of size of this file.

How can I add this file in skipfile list inside launch.json?? I tried adding its path but its not working.
my launch.json:

{
      "name": "Launch Edge",
      "request": "launch",
      "type": "pwa-msedge",
      "url": "http://localhost:4200",
      "webRoot": "${workspaceFolder}",
      "sourceMaps": true,
      "skipFiles": [
        "${workspaceFolder}/node_modules/**/*.js",
        "${workspaceFolder}/node_modules/**/*.es6.js",
        "${workspaceFolder}/node_modules/",
        "<node_internals>/**/*.js",
        "${workspaceFolder}/lib/**/*.js",
        "\\localhost:4200\\main.js"
      ]
}
itsmenabil
@itsmenabil
@mogo-edenpark @alenandry thanks bros, very appreciated...
Andrés Pérez
@Oxyrus
image.png

Why is Angular building the same link for these 2 routerLinks?

<a [routerLink]="['./create']">

And

<a [routerLink]="['../../create']">

The second should build a different link, but they are the same right now

Laxmi Gurung
@grgsamrita
Hi there,
i am working on a web app where I have been using angular as a front-end. I need to implement a mechanism when the user should receive a popup notification not like browser popup notification but for the app itself like logs. I have implemented before by fetching the server API periodically from the client side.
is there a better way where i do not have to periodically fetch data?
my backend developers are using python for the server
Miloš Lapiš
@mlc-mlapis
@grgsamrita Maybe PWA mode can solve it for your.
Famous
@famousmighodaro

Hi all, I have an array of objects which have properties start, date and title from firestore, the start and end are both timestamp, and I am having problem grouping the items which have the same day together in the view. I try to add start date to a separate array. I then compared the startDate with the object array and display the item that has start with the startDate but still not working. Please what I am doing wrong.

 scheduleViewChange(ev: CustomEvent<SegmentChangeEventDetail>) {
    if (ev.detail.value === "day") {
      this.scheduleService.getTodaySchedule().subscribe((values: ISchedule[]) => {
        this.events = values;
      });
      return;
    }
    this.scheduleService.getThisWeekSchedule().subscribe(values => {
      this.startDates = [];
      this.events = values;
      values.forEach(value => {
        this.startDates.push(value.start);
      });
    });
  }

the template

<div *ngFor="let startDate of startDates">
          <h2>{{startDate * 1000 |date: "mediumDate"}}</h2>
          <ion-list *ngFor="let event of events" class="ion-no-margin" #scheduleDay>
            <ion-item class="ion-no-margin" *ngIf="startDate===event.start">
              <label>
                <h4>{{event.title}}</h4>
                <small class="ion-margin-end">Start: {{event.start.seconds*1000 | date: "shortTime" }}</small>
                <small class="ion-margin-start">End: {{event.end.seconds*1000 | date: "shortTime" }}</small>
              </label>
            </ion-item>
          </ion-list>
        </div>
Matt Erman
@CodeLiftSleep
Working on setting up our data store to use ngRx entity but having an issue because of the way the data needs to be set up for use...currently am getting data back in this format: [{id: 1, amount: 5}, {id: 2, amount: 7}] but for ngRx entity it appears to need the data in the following format: [ 0: {id: 1, amount: 5}, 1: {id: 2, amount: 7}] . Since changing every stored procedure/ controller on the backend is not in the cards to enable this change, is there a way to map this properly on the front end when the data comes back before it tries to use it via ngRx entity?
cuznerdexter
@cuznerdexter

Help! Anyone know why my Angular Jest Tests are reporting
error TS2593: Cannot find name 'describe’. ??
I have an NWL NX Workspace running an Angular App (arm-web-core) & Multiple Libs.
The tests in all the Libs are running fine.
The tests in the App are all reporting this error.
I have not edited the config - so these should be the config from the NX setup.
How do I fix this?? Any ideas?

App TsConfigs:
// tsconfig.json

{
  "extends": "../../tsconfig.base.json",
  "compilerOptions": {
    "typeRoots": ["node_modules/@types"],
    "types" : ["node"],
  },
  "files": [],
  "include": [],
  "references": [
    {
      "path": "./tsconfig.app.json"
    },
    {
      "path": "./tsconfig.spec.json"
    },
    {
      "path": "./tsconfig.editor.json"
    }
  ]
}

// tsconfig.app.json

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "../../dist/out-tsc",
    "typeRoots": ["node_modules/@types"],
    "types" : ["node"],
  },
  "files": ["src/main.ts", "src/polyfills.ts"]
}

// tsconfig.spec.json

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "../../dist/out-tsc",
    "module": "commonjs",
    "types": ["jest", "node"]
  },
  "files": ["src/test-setup.ts"],
  "include": ["**/*.spec.ts", "**/*.d.ts"]
}
ArtemRudenko
@artemrudenko
try add jest to tsconfig types:
"compilerOptions": {
    "typeRoots": ["node_modules/@types"],
    "types" : ["node", "jest"],
  },
cuznerdexter
@cuznerdexter
Thanks - will try it.
cuznerdexter
@cuznerdexter
Still not working
cuznerdexter
@cuznerdexter

So this did not work for me:

"compilerOptions": {
    "typeRoots": ["node_modules/@types"],
    "types" : ["node", "jest"],
  },

But this did: ???

"compilerOptions": {
  },
No Idea why though.
So now my App tests are running, and my Lib tests are running. :)
Xava\du
@xavadu_twitter

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.getStateSnapshot()

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?

Krishna
@krishyalla_twitter
Did anyone used the ng-packagr for inline css?
@krishyalla_twitter
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
@Wahtdb_twitter
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š
@mlc-mlapis
@xavadu_twitter Something like:
<ng-container *ngIf="date$ | async as date">
   <cmp-a [date]="date"></cmp-a>
   <cmp-b [date]="date"></cmp-b>
</ng-container>
Miloš Lapiš
@mlc-mlapis
Or the equivalent syntax:
<ng-container *ngIf="date$ | async; let date">
   <cmp-a [date]="date"></cmp-a>
   <cmp-b [date]="date"></cmp-b>
</ng-container>
Laxmi Gurung
@grgsamrita
Hi,
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?
Arjen
@the-ult

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š
@mlc-mlapis
@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
@potion-cellar

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
@coderishu
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
@coderishu
with currying only
raineer24
@raineer24
good evening :)
Max Ludwig
@dAnjou_gitlab
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.
finlaydotb
@finlaydotb

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š
@mlc-mlapis
@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
@edcesar

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?

image.png