angular/angular

Discussion for angular (2+) - need help? create a stackblitz with your issue to get help faster using this template: https://stackblitz.com/fork/angular-issue-repro2

Amin Bashanfar

@Amin-bash

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

Miloš Lapiš

@mlc-mlapis

@UrKr You can use for example:

Urban

@UrKr

@mlc-mlapis Interesting, thanks for the links

Pankaj Sharma

@iimphoenix310_twitter

Hi im new to Angular development. Im from India. Can anyone please suggest a better way to use AMP with Angular?

mridul-netizen

@mridul-netizen

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?

RonnBlack

@RonnBlack

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

@alex88

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

Miloš Lapiš

@mlc-mlapis

@alex88 Look at https://github.com/angular/angular/issues/40577#issuecomment-768209703

Alessandro Tagliapietra

@alex88

oh nice didn't find that! Thanks @mlc-mlapis

Miloš Lapiš

@mlc-mlapis

@alex88 :thumbsup:

Daniel Willis

@danww

@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

@stt106

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?

aidosmen

@aidosmen

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š

@mlc-mlapis

@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, ...).

Ijee

@Ijee

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

@stt106

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š

@mlc-mlapis

@stt106 A component has inputs and outputs usually.

Tiantang Sun

@stt106

ok so I can pass the common component into other components that reference it?

Acoder-Ana

@Acoder-Ana

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š

@mlc-mlapis

@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.

thegitty

@thegitty

Hi,
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?

Thanks!

Kyle Then

@tallkid6_twitter

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

@CodeLiftSleep

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?

ie, say api\reasons = 'Scorecard\getAllReasons'

Daniel Willis

@danww

@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, ...).

@mlc-mlapis Cool, that makes sense. I tend to work with a different pattern. I use ngrx, and usually have a per-feature container component, where I gather from the state, etc., all the data for the child components, and pass that data to the components as Observables or BehaviorSubjects. I use the OnPush ChangeDetection strategy in each Component, and so I never need/usengOnChanges or getters/setters. It seems really simple and works really well, but I'm not sure if it's good/best practice.

Shane Gilbert

@shanegilbert

Any suggestions on why template expressions would stop working after updating to Angular 11.1 from 10.x? All of the {{somePropName}} style of interpolations no longer process and just show that text with the brackets and not the value from the property/value/method.

Miloš Lapiš

@mlc-mlapis

@danww Yep, it sounds good. The only detail is that with the OnPush strategy, you can probably pass all data as inputs [...]="obs$ | async", and you can have standard inputs on those child components then. It would also mean that they would be really dumb ones.

Miloš Lapiš

@mlc-mlapis

@shanegilbert Hmm, it has to be some dummy problem. I guess that during the upgrading something was broken on the node_modules level. So probably as the first step, try to delete it, and via npm i invoke a fresh install.

Daniel Willis

@danww

@mlc-mlapis True. I just like to keep my data as Observables as long as possible, so I pass them as far along as possible, only using | async at the last possible opportunity in the template. Just thinking about it now, I wonder if there's a performance difference between passing Observables and plain objects into a Component?

Rohit Yadav

@rohyadav

need help on search functionality its not working as expected

https://stackblitz.com/edit/angular-serch-pipe?file=src/app/app.component.html

here is my code

Rohit Yadav

@rohyadav

i mean for negative case if doesn't find anything in the list
should message will show "no result found of 'robot'"

Miloš Lapiš

@mlc-mlapis

@danww It certainly has to be, but probably there are many factors that affect when it is significant and when not. I don't if you do some regular observations on how frequently are CDs invoked in typical application cases and if they are really effectively invoked and minimized and not redundant.

ROne

@ravi-mone

hello folks, anyone know WCAG here

Jorrit

@jorrit-wehelp

:scream: there are folks who don't know WCAG? ;p

Matt Erman

@CodeLiftSleep

@mlc-mlapis Do you know if it is possible to config an api setup to utilize defaul endpoints for ngRx data to point to the current api?

Miloš Lapiš

@mlc-mlapis

@CodeLiftSleep The NgRx Data package is too pre-defined for us so we use the Store package with our own API to the back-end.

Matt Erman

@CodeLiftSleep

That is what we were doing as well but we want to eliminate all the repetitive reducer/action/effect boilerplate code for every single store item that is getting a little out of control

Miloš Lapiš

@mlc-mlapis

@CodeLiftSleep Yep, it could be sometimes a bit rougher, but it's a question if you have more luck and better result than the authors of the NgRx/Data package. Another thing is also unit/integration testing when you need some elementary operations with reducer/action/effect set.

Matt Erman

@CodeLiftSleep

@mlc-mlapis There seems to be an issue when I try to use registerServices and try and override the default getByKey implementation, it still calls the original one...if I override the getAll implementation it works...theoretically it oesn't make much difference because am calling a service and acn pass the router state variables into that call but it seems strange this would be the case

Miloš Lapiš

@mlc-mlapis

@CodeLiftSleep Hmm, are you able to demonstrate the problem in a simple repro, ideally online, using Stackblitz?

DrewMoody

@DrewMoody

Anyone ever added cell search (as in search a cell's contents to see if it contains a search term string) to an extension of the CDK Table? Or to mat table. Trying to figure out the best approach

Matt Erman

@CodeLiftSleep

@mlc-mlapis It is occuring on my work project so not really...just curious why getAll works fine by getByKey does not

@mlc-mlapis Also, I think the default is set to use a web api but we are using MVC .Net with C# controllers hitting an SQL DB...now that I think of it I don't even know if that would work via their api setup without overriding things

david castillo

@ecuanaso

Whats the best way to upgrade an Angular cli/core 7.2.8 project all the way to Angular 12 without experiencing dependency issues? Would it be upgrading my angular cli/core to 8 and then to 8 and then to 10 etc?

RonnBlack

@RonnBlack

@ecuanaso Have you looked here? https://update.angular.io/

Where communities thrive

People

Repo info

Activity