Angular10

Great Reads

Building Angular Reusable Components using ng-template, ngTemplateOutlet & ngTemplateOutletContext

by Vikas Sharma

Learn how to create reusable components

ASP.NET Core: Building a Robust Authentication and Authorization System using IdentityServer

by Vikas Sharma

Build a robust authentication and authorization system using IdentityServer and ASP.NET Core 3.1

Tour of Heroes: Angular, with ASP.NET Core Backend

by Zijian

A series of articles comparing programmer experiences of Angular, Aurelia, React, Vue, Xamarin and MAUI

Modal Popup Example and Tutorial with Angular 10 Material

by Ahmed Bouchefra

In this tutorial, we’ll build by example a modal popup using Angular 10 Material.

Latest Articles

Tour of Heroes: Angular, with ASP.NET Core Backend

by Zijian

A series of articles comparing programmer experiences of Angular, Aurelia, React, Vue, Xamarin and MAUI

Building Angular Reusable Components using ng-template, ngTemplateOutlet & ngTemplateOutletContext

by Vikas Sharma

Learn how to create reusable components

ASP.NET Core: Building a Robust Authentication and Authorization System using IdentityServer

by Vikas Sharma

Build a robust authentication and authorization system using IdentityServer and ASP.NET Core 3.1

Modal Popup Example and Tutorial with Angular 10 Material

by Ahmed Bouchefra

In this tutorial, we’ll build by example a modal popup using Angular 10 Material.

All Articles

top

Angular10

*Ngif syntax issue in angular

28 Jan 2021 by Harshal S. Limaye

You could achieve this using following code: You're a GC user... You're a GCDR user... You could also achieve the same using ngSwitch directive:

Angular6

Angular7

Angular8

Angular9

Angular5

Redirect_uri_mismatch for angular package: angular-auth-oidc-client

17 Aug 2020 by Sandeep Mewara

Was not aware of it. Looking at Google, seems the possible reason could be Quote: the redirection URI parameter being sent does not match the one registered for your client. It means - when you have created your API key you set the URL redirect...

Cannot read property 'correlationdepthunits' of undefined - in angular

31 Aug 2020 by Sandeep Mewara

Quote[^]: ‘Undefined’ is the property of the global object. If you don’t assign any value to a variable is of type ‘undefined’. A code also return the undefined value when the evaluated variable doesn’t have any assigned value. Example: function...

How do I run a docker image?

11 Sep 2020 by User-8621695

Hi All, I have created an angular application and deployed it on docker. My docker file contains below code FROM nginx:alpine COPY ./dist/ui/. /usr/share/nginx/html Now I ran below code to check my docker images: docker images I can see my...

Angular10

docker

containers

CORS issue with ASP.NET web API 2 and angular local host

5 Nov 2020 by Richard Deeming

Either you haven't deployed the CORS-enabled version to the server, or the API you've updated isn't the API you're calling. Use your browser's developer tools to inspect the network request, and look at the response headers to check the...

How do I make mat dialog content scroll all the way to bottom

23 Nov 2021 by ander99

So i have a mat dialog content with a scrollbar but the problem is i cant scroll all the way down to see the mat dialog actions which are 2 buttons. Right now this is the current code

Angular10

How to deploy whatsapp chatbot and web application in heroku

20 Feb 2023 by Richard MacCutchan

See Learn about building, deploying, and managing your apps on Heroku.[^]

Angular multiple file upload using reactive forms

13 Aug 2020 by Tridib Chatterjee

I'm trying to upload multiple files in my Angular Application using ngx-material-file-input since my form is made with angular material and it doesn't support input type file by default. I'm using reactive forms but for some reason, the files are...

Angular10

form

File-Upload

Redirect_uri_mismatch for angular package: angular-auth-oidc-client

17 Aug 2020 by Member 11072126

Hi All, I am trying to implement login functionality using the package: angular-auth-oidc-client for Angular 10 project. I have gone through the documentation and have configured service but getting the error: Message: redirect_uri_mismatch...

Cannot read property 'correlationdepthunits' of undefined - in angular

31 Aug 2020 by Member 11072126

Hi All, Am new into Angular and am trying to load a dropdown with static values (values defined in a .ts file). While am trying to load the array with the values, am getting error msg as: Cannot read property 'correlationDepthUnits' of...

Focus() and nativeelement.focus() not working in angular 10

18 Dec 2020 by Member 11072126

Hi All, I am trying to implement focus() on form elements in Angular 10. I thought it was quite simple. I tried in Angular way which was using ElementRef and even tried with basic javascript code - document.getElementById(..). But, nothing...

Typescript

Angular10

Focus() and nativeelement.focus() not working in angular 10

4 Sep 2020 by Sandeep Mewara

Here, the code works fine: form-focus element Angular way[^] import { Component, ViewChild, ElementRef } from '@angular/core'; @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] })...

Typescript

Angular10

Why ng serve is showing multiple times in process monitor?

14 Sep 2020 by Jyothish Bhaskaran

I am developing few applications using .net core and angular in Ubuntu OS. Due to drastic performance loss on my laptop I checked the current process in execution using Htop. Its showing lot of instances of ng serve. Is this some error or...

.NET-Core

Ubuntu

Angular10

How to validate just the ngmodel group in wizard step in driven form

29 Sep 2020 by Member 13926859

Hello every one i a using wizard step and i have a from and inside it i have ngmodelgroup i want to validate just ngmodelgroup before going to the next step i tried this but it doesn t work [disabled]="!f.clientgroup.valide" i m working with...

Angular10

AngularJs

form

How can I add the image to header column in using wijmo grid

7 Oct 2020 by Member 11149766

How can i add the image to header column in using wijmo grid in angular What I have tried:

Angular10

How can I add the image to header column in using wijmo grid

7 Oct 2020 by Sandeep Mewara

It would be easier and faster if you post these in grapecity forum, or atleast look there. Based on reply to this query: Row header icon change in Edit mode of Wijmo5 Flex Grid | General Discussion | Wijmo 5 | GrapeCity Forums[^], it seems you...

Angular10

Building Angular Reusable Components using ng-template, ngTemplateOutlet & ngTemplateOutletContext

13 Oct 2020 by Vikas Sharma

Learn how to create reusable components

Angular10

Nav bar not working when placed in shared folder

17 Oct 2020 by kedar001

when i place nav component html code in App.component.html it works but not worked in shared folder. Anguler 10 project structure as below App Auth Dashboard Layout Shared Dashboard-nav ...

Angular10

How to pass a array object data in parammap?

20 Oct 2020 by Tarun Surana

I have fetched a json array data in paramMap of array object but i get a result null. I pass a parameter of array object in paramMap. "currencies": [ { "code": "BGN", "name": "Bulgarian lev", ...

Typescript

Angular10

Parameter

How to solve type error problem when data is null in ngif?

17 Nov 2020 by Tarun Surana

If data persent in all section of Api so not get any type error if any section is null so give me type error. I will share you a code this is html component file.

Typescript

HTML5

Angular10

How to access the array of json objects in angular component

31 Oct 2020 by Virendra S from Bangalore, Karnataka

I have the below data from api call: [ { "newsCategory": "Corporate", "newsHead": "header data", "newsDate": "20-01-2020", "newsContent": "something comkdnf" }, { "newsCategory": "hjhds", ...

Javascript

Angular10

JSON

CORS issue with ASP.NET web API 2 and angular local host

5 Nov 2020 by Virendra S from Bangalore, Karnataka

i am getting the CORS issue while accessing the deployed ASP.Net Web API 2 while running the angular app locallly. the same API is working with postman. Error: Access to XMLHttpRequest at...

Multi select drop down list in angular material issue

18 Apr 2021 by Virendra S from Bangalore, Karnataka

Angular10

Angular5

How to pass data from one component to another

23 Sep 2021 by Virendra S from Bangalore, Karnataka

View profile I want the pass emp_no value to profile component here, i dont want query string here. What I have tried: ...

Angular10

Focus() and nativeelement.focus() not working in angular 10

17 Nov 2020 by Member 14995555

import { Component, OnInit, ElementRef, ViewChild } from '@angular/core'; export class export class TestComponent implements OnInit { @ViewChild("drop") nameField: ElementRef; ngOnInit(): void { setTimeout(()=>{ ...

Typescript

Angular10

How to solve type error problem when data is null in ngif?

17 Nov 2020 by Pete O'Hanlon

For those who are facing an issue similar to this, the reason that the bindings are failing here is because there is an assumption that there is actually a value at element 0 of the array. If the array is null then obviously there can't be an...

Typescript

HTML5

Angular10

Focus() and nativeelement.focus() not working in angular 10

29 Nov 2020 by dhschaffer

try adding tabindex="0" to the component, it allows it to be focusable

Typescript

Angular10

How to end SAML session on browser close

2 Dec 2020 by Richard Deeming

You cannot redirect the user to another page in the beforeunload event. If you could, every malicious site on the net would use that tactic to prevent you from leaving their site - as soon as you try to close the browser or tab, or navigate away...

*Ngif syntax issue in angular

6 Dec 2020 by Richard MacCutchan

Angular NgIf DIRECTIVE[^]

How to get the array value from another array value (key value pair)

7 Dec 2020 by Virendra S from Bangalore, Karnataka

abc = [1,3,5] abcMaster= [ { SL_Id: 1, SL_Name: "Value1", }, { SL_Id: 2, SL_Name: "Value2", }, { SL_Id: 3, SL_Name: "Value3", }, { SL_Id: 4, SL_Name: "Value4", }, { SL_Id: 5, SL_Name: "Value5", } ] slValue : any[]; I want something like this:...

Typescript

Javascript

Angular10

How to get the array value from another array value (key value pair)

7 Dec 2020 by Richard Deeming

Try: const slValue = abc.map(id => abcMaster.find(m => m.SL_Id === id)?.SL_Name ?? `ID ${id} was not found`); Demo[^] References: const - JavaScript | MDN[^] Array.prototype.map() - JavaScript | MDN[^] Array.prototype.find() - JavaScript |...

Typescript

Javascript

Angular10

How to edit and display(bind) the data in one component. Angular

9 Dec 2020 by Virendra S from Bangalore, Karnataka

this component does the editing as well as displaying the employee profile. as demo, below I have given one field control. In Edit mode: Dropdown gets the master list. already existing employee data should be binded to dropdown while editing. In...

How do I make my textarea has different values?

15 Jun 2021 by HycarlDev

I have 3 quill editors, that I loop and whenever I type in one of those 3, the other 2 will automatically follow. How do I make each editor has its own values? I'm putting it in finalAnswer. This is my subjective.component.ts public...

Simplifying known vanilla JS to advanced ES

3 Jan 2021 by Nishanth J

All The below codding snippets works perfectly. Need to make sure that the below snippets of code can be simplified using any of an advanced ECMA standards let pauseAllcount = 0, resumeAllcount = 0; this.xUserDetails.forEach((el, indx)...

How to read the data from excel from specific rows and columns in angular

21 Jan 2021 by Member 7946563

I want to read the Excel Data which contains the below format. The Actual Data will start from row no 7, row no 6 will have the headers. I want to start the data reading from row 7. SL.No EmployeeName Worked Date Start Time End Time ...

Typescript

Angular10

How to read the data from excel from specific rows and columns in angular

21 Jan 2021 by Christian Graus

angular-excel-read-table - StackBlitz[^]

Typescript

Angular10

How can I transfer xhrbackend (xhrconection) to httpxhrbackend or httpinterceptor

23 Feb 2021 by VladimirSid

Hello. I am having some problems switching from XHRBackend and XHRConnection (Angular 4.3) to Angular 11. I know I have to use an HttpInterceptor or/and HttpXhrBackend, but I can't figure out how to apply it to in a project. custom.http.ts ...

Typescript

Angular10

How do I remove the extra blank option coming in bootstrap dropdown?

22 Feb 2021 by chaturvedi_anshumaan_20191

I have been using Angular as my UI framework. In my project , I had the need to define an enum. It goes as: AlertSeverity.ts: export enum AlertSeverity { Normal = 0, Warning = 50, Severe = 100, } and another enum file :...

AngularJs

Angular10

bootstrap

I am unable to iterate nested objects on the basis of key in angular

27 Feb 2021 by ubaid1

I am working on Angular app and I have an end point which return the following JSON as a response: { "SuggestedCourses": [ {"courseId": "1","courseName": "SCourese1"}, {"courseId": "2","courseName": "SCourese2"} ],...

Angular10

Multi select drop down list in angular material issue

18 Apr 2021 by Katarina Nikolic

In your case, the value is wrong, it should be like this: {{dept.Dept_Name}}

Angular10

Angular5

Msaluirequiredexception errorcode: user_null angular 10

26 Apr 2021 by elshorbagy

I'm building a SPA application with angular 10. The App should connect to an Azure secured web api to get the data. When I connect to the web api, I get this error "Microsoft.Identity.Web.MicrosoftIdentityWebChallengeUserException: IDW10502: An...

Angular10

ASP.NET-Core

API

Attaching outlook email in web application from mobile

3 Jun 2021 by Richard Deeming

If you're asking how to write your own mobile email client with the option to save the message, that is beyond the scope of a "quick answers" forum. If you're asking how to change an existing application to add this option, that's off-topic for...

C#6.0

Angular10

How to upload large amount of files in angular

15 Jun 2021 by atup uxi

Use ng2 file upload plugin for angular 4 ng2-file-upload and you can upload large files also.

How do I make my textarea has different values?

15 Jun 2021 by Christian Graus

You have mapped all three textboxes to the same variable. Map them to different ones [(ngModel)]="AnswerSeason" Have an array and access that here

How to solve error NG8002: can't bind to 'routerlink' since it isn't a known property of 'a'.?

30 Jul 2021 by ahmed_sa

I work on angular 11 I face error when build angular app ERROR in src/app/Employee-list/employee-list.component.html:22:45 - error NG8002: Can't bind to 'routerLink' since it isn't a known property of 'a'.

How to pass data from one component to another

23 Sep 2021 by Steve-Davis-1

Have you tried using the angular location wrapper for the state api? Angular[^]

Angular10

Cdk drag and drop hover or mouseover not working in firefox

27 Jan 2022 by Member 12785541

I have implemented multiple drag and drop using cdk library on my Angular project(Version 10.2.5). The problem is (using firefox browser) when i drag something the hover effect of the drop container won’t take any effects anymore. With...

Angular10

I want to search the text and go to that place when we enter or key press in angular

9 Feb 2022 by OriginalGriff

While we are more than willing to help those that are stuck, that doesn't mean that we are here to do it all for you! We can't do all the work, you are either getting paid for this, or it's part of your grades and it wouldn't be at all fair for...

Angular9

Angular10

Angular5

Adding response headers in an angular application

23 May 2022 by RajamArunachalam

Is there any way to add headers to the http response in an angular application, if the calls are made to fetch details from local json files? Version: 8 and above. Note: I have used HttpClient to fetch data from local json file. What I have...

Angular10

Converting jquery code to typescript angular

19 Jul 2022 by Member 15710982

$(document).ready(function(){ $(".hashtag").click(function(){ var txt = $.trim($(this).text()); var box = $("#text-box"); box.val(box.val() + txt); }); });

Typescript

Angular10

jQuery

Advanced search control for angular

23 Mar 2023 by Jeffrey Rempel

Does anyone have a suggestion for a alternative control similar to ngx-advanced-search or ngx-magicsearch. These don't seem to be maintained anymore. I'm looking for a control where users can choose which fields they want to search by to provide...

Angular10

How to get values from cookies using angular?

26 Sep 2023 by kmuharram

I have a system on the Internet that enables me to add custom applications to it through a window within this system. When you enter this window, the user session hash will be sent to the URL of the my custom application by GET method. By...

Typescript

Javascript

Angular10

How to deploy whatsapp chatbot and web application in heroku

20 Feb 2023 by Agnib Pyne 2022

Hi All, I have developed a web application using .Net Core API, Angular and PostgreSQL. Also, a whatsapp chatbot has been developed using Python, Twilio and MongoDB. Now, I want to deploy these for client use and planning to host these in...

ASP.NET Core: Building a Robust Authentication and Authorization System using IdentityServer

5 Oct 2020 by Vikas Sharma

Build a robust authentication and authorization system using IdentityServer and ASP.NET Core 3.1

C#7.0

Angular10

ASP.NET-Core

How to end SAML session on browser close

2 Dec 2020 by Member 11072126

Hi All, Am using Angular 10 along with Web API. We are using SAML authentication process and so we are just feeding the credentials to SAML while logging in and the rest is being taken care by SAML. It means that the session is also being...

Tour of Heroes: Angular, with ASP.NET Core Backend

18 Nov 2023 by Zijian

A series of articles comparing programmer experiences of Angular, Aurelia, React, Vue, Xamarin and MAUI

Modal Popup Example and Tutorial with Angular 10 Material

28 Jul 2020 by Ahmed Bouchefra

In this tutorial, we’ll build by example a modal popup using Angular 10 Material.

Angular multiple file upload using reactive forms

13 Aug 2020 by Tridib Chatterjee

public onSelectedFileMultiple(event) { if (event.target.files.length > 0) { for (let i = 0; i

Angular10

form

File-Upload

Where I am stuck to solve ngif error in project?

14 Oct 2020 by Tarun Surana

I have tried so many times to solve ngIf Error problem solve but no solution found on youtube related to ngIf? I am stuck on single country view page in this page ngIf Error problem came. What I have tried: FIrst i have to region page then we...

Angular10

*Ngif syntax issue in angular

28 Jan 2021 by Virendra S from Bangalore, Karnataka

my data: roleName: string this.roleName='GC'; I want to display the some div based on the role. help me with *ngIf syntax What I have tried: *ngIf="roleName =='GC' || roleName =='GCDR'" *ngIf="roleName !=='GC' || roleName !=='GCDR'"

How to use or access the angular material menu API

17 Apr 2021 by Member 11072126

Hi All, I am developing a menu using angular material menu and I want the menu icon to be disappeared once I click outside of the menu/submenu. I don't know which event will exactly work for this, but I tried few things using css and other...

Converting jquery code to typescript angular

19 Jul 2022 by Luiz Gusthavo

$('button.cooldown').click(fun...

Typescript

Angular10

jQuery

How to upload large amount of files in angular

10 Jun 2021 by Elite Labs

When i upload more than 1200 files some of the requests gets failed ,all requests are sent at once. Now i want to upload files sequentially after one file successfully submitted next file should begin What I have tried: I created a uploader...

Angular unit testing click event which executes only navigatebyurl & opening matdialog using jasmin & karma

25 Aug 2021 by dipti ranjan sahoo

**1. How to write unit test case for below click event in angular using Jasmin & Karma.** onClickCancel(): any { this.router.navigateByUrl('login'); } **2. How to write unit test case for below click event which open material...

Angular10

Karma

Jasmine

Why kendo dialog is not generating on click event while we use change detection strategy in nx based angular project?

12 May 2022 by Aleena Joice

I am using kendo dialog in nx-based angular application with "ChangeDetectionStrategy" to add employee details. In the dashboard component I have first kendo dialog which contains kendo multicombobox. From that I can search for employee and if...

Angular10

Kendo-UI

How to get value from frombuilder group for object values? Mat table is used to display the data

16 Jun 2022 by Joshna J U

component.ts: ------------- this.createForm = this.fb.group({ equipments: [this.data.equipments || "", [Validators.required]], storage: [this.data.storage || "", [Validators.required]], users: this.fb.group({ admins:...

Angular10

Angular11

How to place text inside prime ng doughnut

5 Sep 2022 by Joshna J U

i tried the below code,but its not working,have to place the text content inside doughnut What I have tried: this.data = { labels: ['a', 'b', 'c', 'd', 'e'],...

How do I make a logo small while the content scroll up in angular like any whatsapp number profile viewing

6 Nov 2022 by BIBASWAN

Hi,I am doing a demo project in angular and i need to make my profile picture smaller and from the center of the screen to the upper left side of the screen in angular when the content scroll-up. This is similar to when we view a whatsapp...

Angular10

Advanced search control for angular

23 Mar 2023 by Ayush Bajpai 2023

Did you find anything? Please suggest me too, would be helpful. Thanks

Angular10