天道酬勤,学无止境

angular7

Getting OAuth tokens for Azure DevOps API consumption

I have a web app written in Angular 7. I'm trying to consume Azure DevOps APIs and I understand that I have to setup an Azure Active Directory App. I have tried few libraries like adal-angular msal-angular and wrappers like microsoft-adal-angular6. Followed their documentations and samples. I can successfully access the User's name, emails and a token. I can use the token for Microsoft Graph apis but not for Azure DevOps apis. I tried using this token as a Authentication Bearer for my HttpClient however I'm getting Status Code 203. Then I found this answer and I think this is the missing part

2021-09-24 03:53:20    分类:问答    angular   azure   azure-devops   azure-active-directory   angular7

Angular 7 : problem while trying to using a method service in a component

I'm trying to learn how to use Angular 7. I follow the guide on his official site and now I want to do a Form for try to calculate the fiscal code ( for italian people only ). The user will insert the data for calculate it and when you start to type your fiscal code the program in background start to calculate it and when they are equal the form will stamp a message that say: "Right" or something like that. I made a service to do the calculation and validate it with a custom validator a get request to a specific URL for retrieve the city code. The problem is: when i try to call the method of

2021-09-24 00:39:49    分类:问答    angular   angular7

How can I use ViewChildren to get multiple native elements using template variables?

I'm trying to use ViewChildren to get an Array of stacked canvas elements from my template so I can later draw on them like layers in a drawing program. drawing.component.html <canvas #canvaslayer style="z-index: 0;"></canvas> <canvas #canvaslayer style="z-index: 1;"></canvas> <canvas #canvaslayer style="z-index: 2;"></canvas> drawing.component.ts @Component({ selector: 'app-drawing', templateUrl: './drawing.component.html', }) export class DrawingComponent implements OnInit { @ViewChildren('canvaslayer') canvasLayers: QueryList<ElementRef>; ngOnInit() { //this.canvasLayers == undefined here

2021-09-23 22:53:03    分类:问答    angular   typescript   angular7

How to change HttpClient code after update app to Angular 7

I updated Angular to version 7 into my app and I have to change my code a little bit after update but I'm not sure how to do it. This is example of code to change (in previous version of Angular): get(): Observable<MyResponseClass | null> { let url_ = some_url; let options_: any = { method: "get", headers: new Headers({ "Content-Type": "application/json", "Accept": "application/json" }) }; return this.http.request(url_, options_).flatMap((response_: any) => { return this.getResponse(response_); }).catch((response_: any) => { if (response_ instanceof Response) { try { return this.getResponse(

2021-09-23 19:13:25    分类:问答    angular   angular7   angular-httpclient

How do I display a base64 image in Angular 7?

I want to take the base64 string and use it to display the image. Below is the HTML file. I want to use the base64 string and use it in the img tag: <ion-content> <ion-card> <img src={{imageFileBinary}} /> <ion-card-header> <form> <ion-input id="myform" type="file" name="file" (change)="postMethod($event.target.files)"></ion-input> </form> <ion-card-title>Nick</ion-card-title> </ion-card> </ion-content> I get imageFileBinary from the .ts file. Below is the .ts file: export class MyprofilePage implements OnInit { imageFileBinary; userDetails: UserDetails; constructor(private

2021-09-23 12:57:18    分类:问答    angular   base64   angular7

cli command ng new not working for angular 7

Just updated my cli, npm, ng and nodejs to latest versions. An ng v gives this: Angular CLI: 7.0.2 Node: 8.12.0 OS: darwin x64 Angular: ... Package Version ------------------------------------------------------ @angular-devkit/architect 0.10.2 @angular-devkit/core 7.0.2 @angular-devkit/schematics 7.0.2 @schematics/angular 7.0.2 @schematics/update 0.10.2 rxjs 6.3.3 typescript 3.1.3 Update old Angular 6 projects successfully also. However, upon issuing the command ng new myproj, I get the result: Schematic input does not validate against the Schema: {"name":"myproj"} Errors: Data path "" should

2021-09-08 17:41:43    分类:问答    angular   angular-cli   angular7

Angular 7 - How can I share the token renewal Observable?

Before each request a HTTP interceptor checks if the access token is expired and if so, it first renews the token and then continues the request. The problem is on pages that have multiple requests. On those pages the interceptor tries to renew the token for each request. How can I share the token renewal request in this case? The method that is responsible for token renewal is this: renewToken() { let refreshToken = // get refresh token let accessToken = // get access token if (!refreshToken || !accessToken) return; let requestData = { accessToken: accessToken, refreshToken: refreshToken }

2021-09-08 16:50:24    分类:问答    angular   rxjs   observable   angular7

Not getting opened on first click when putting primeng toast on shared component in angular 6

I have used prime ng and put this in shared component so that I can share this p-toast where ever I want but when I am click from parent component to open p-toast it is not getting opened on first click, click on second time it gets opened Parent-component.html <app-modal [keydata]='c' [modalData]="modalData" [data]="selectedRowForDelete" (onConfirmModal)="onConfirm($event)" ></app-modal> Parent-component.ts export class CustomComponentsComponent implements OnInit { @ViewChild(ModalComponent ) modalComponent: ModalComponent ; setPopupData(row) { const deleteMsg = 'You want to delete the item'

2021-09-08 10:34:20    分类:问答    angular   angular7   primeng

Angular: how do I access the reference variable which is in a ng-template

Is there a way to access #interface, which is declared inside ng-template element? I must put the <interface-settings inside <ng-template. Because I would need to use the *ngTemplateOutlet. As I could not find a solution for this, I have to add another <interface-settings #interface and not declare it inside ng-template. would appreciate if you know other workaround. Thanks // parent.html <button type="button" (click)="interface.apply()"></button> <ng-template> <interface-settings #interface></interface-settings> <ng-template> //child.ts (interface-settings.ts) apply() { console.log("apply");

2021-09-07 21:07:44    分类:问答    angular7   angular8   parent-child   angular-template   angular-template-variable

Not loading image from local path in Angular 7

It's not loading any image from local path, but loading images from internet. Please help me load images from local. I have created the folder containing images inside the project itself. test.component.ts import { Component, OnInit } from '@angular/core'; @Component({ selector: 'test-app', templateUrl: './test.component.html' }) export class TestComponent implements OnInit { image1= '/img1.png'; image2= 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQCNTJ-wSPyf8KvKYO-SKhfWi6EkpfgpaBYpcmWlpcyiHhXhzCvBw'; constructor(){ } ngOnInit() {} } test.component.html <img class="mx-auto d-block"

2021-09-07 16:36:04    分类:问答    html   angular   typescript   angular6   angular7