How to delay router deactivation in Angular2?

I have been playing with the Angular2 Router, to figure out some other issues. I've came across something like that in Angular2 documentation: deactivate(instruction: Instruction) : Promise Removes the contents of this router's outlet and all descendant outlets I am wondering how can I set delay, and use new class as a provider, so that all of the Router navigation has some delay (lets say 1s). I want to do it, so that I can have slide in slide out animation - If I would be able to

Emit event through nested components in Angular2

One can use Output() decorator to emit the event from the child component so that the parent component can catch it. What I need is to catch an event emitted by any child component, which is not necessarily a direct child of a given component. Let ComponentTwo be a component which emits the event. If the app has the following structure: App -> ComponentTwo, then we can easily catch the event emitted by ComponentTwo. But if we consider structure like App -> ComponentOne -> ComponentTwo,

Angular Message passing with observable doesn't work

Well here is a plnk, http://plnkr.co/edit/y7PZONWELeG4f2Ywbw4k. @Injectable() export class MsgService{ // First solution sends nothing to the console in ChatList private msgSource = new Subject<string>() msgEvent$ = this.msgSource.asObservable() // Second solution -> sends 'completed' in the ChatList comp //chat_id; //msg = Observable.of(this.chat_id) sendMsg(id){ this.msgSource.next(id) //this.chat_id = id }} I am trying to to pass a message from child to parent via service w

Coverage only reported of karma-test-shim (Electron/Angular2/SystemJS)

All my tests run and pass successfully. But I keep getting either 0% coverage, or coverage of my karma-test-shim.js that launches the tests and their source files via SystemJS. I have tried using karma-coverage as a preprocessor in various ways as well, sometimes it pre-processes the spec.ts files, sometimes the ts files, sometimes the app directory, sometimes the js files or spec.js files. I use the Electron browser to load a require shim in the karma-test-shim.js file, as this is an app with p

Angular ionic 2 side menu after login not working

I'm trying to set the root page depending on if the user is logged in or not. The side menu not working after the user logged in . But if refresh the page the menu working perfectly. So i figured that something must be wrong with the page or the navigation, but I can't seem to figure it out. app.component.ts import {Component, ViewChild} from '@angular/core'; import {Platform, ionicBootstrap, Nav} from 'ionic-angular'; import {StatusBar} from 'ionic-native'; import {TabsPage} from './pages/tab

RxJs Observables and http angular2 service

I know there's a lot of tutorials over there about how to use RxJs/Observables. I need some very straightforward example in order to see how to use Observables with http angular2 service using map, subscribe and catch methods. Up to now, I've able to generate a service in order to get communication with a REST endpoint: @Injectable() export class UsersApi { protected basePath = 'http://localhost:8082/commty/cmng'; constructor(protected http: Http) { } public create(user: s

Angular Tinymce custom tag passing attributes

i have created a custom tag in tinymce. In that custom tag i want to pass name. so this is the code i tried <field name="field">textbox</field> Here if i get the final source generate by tinymce it has only <field>textbox</field> in the source data. I want to get the whole thing with the name as well in the source. I refered this to make the custom tag Tiny MCE adding custom HTML tags.

How to implement ngOnChanges for input validation on angular 2 without triggering ' Expression has changed after it was checked.' error

I tried to wrote own custom component that has basic validation with regex that can be given as input to component. Theres two cases, one where form is empty initially (new item form) and another where data is allready there (edit). Problem is that when i try validate fields after data is initially set, usually i get 'Expression has changed after it was checked.'. I understand why this check is made and why error occurs but i dont simply get it what is the point of 'ngOnChanges' if i cannot c

How to load images from dynamic src in angular2 and webpack?

I'm using angular2 and webpack2 in my project. My co-workers start the project from Angular2 QuickStart, and then I move it to Webpack environment. I use html-loader to load components templats and use url-loader to extract images and fonts: { test: /\.html$/, loader: 'html-loader' }, { test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/, use: 'url-loader?limit=1000&name=assets/[name].[hash].[ext]' }, The templates are like this: <section class="creation-mobile">

angular 2 trigger custom event for test purpose

I'm trying to write a unit test checking that I can handle a custom event and verify that I send back the same event Seems that my event isn't triggered or handled, I can't say here is the component : @Component({ selector: 'sites', templateUrl: './sites.component.html', styleUrls: ['./sites.component.css'], }) export class SitesComponent implements OnInit { @Input() sites : Site[]; @Output() selectedSiteEvent = new EventEmitter(); constructor() { } ngOnInit() {

Angular Observables vs Promise CRUD and refreshing data

I have a few questions regarding angular 2/4 pattern for simple crud application. Most the examples I've viewed, I don't see how the data is refreshed after insert/updating, etc.. I'm a bit new with Observables but understand most of the pattern with the exception with refreshing data after an insert/update/delete. Can someone explain the best way to refresh data and do I really need to use Observables instead of promises ? Is it accepted to still use promises? How do I do the following belo

Compile and run Angular Project?

Im not familiar working with angular projects,I have got one new angular project which is partially completed and i tried to run the project using Angular cli ,I have tried all the possible way that i have found on web .I tried This method Shows some warning ``-- angular-cli@1.0.0-beta.28.3 `-- UNMET PEER DEPENDENCY rxjs@^5.0.1 npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\angular-cli\node_modules\chokidar\node_modules\fsevents): npm WARN notsup SKIPPING OPTIONA

Angular 4 Error: formGroup expects a FormGroup instance

I get the folowing error provided in screenshot. I am creating a LOGIN form in Angular 4. Here is the current code with the error. app.module.ts import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { ReactiveFormsModule } from '@angular/forms'; import { AppComponent } from './app.component'; import { ProductComponent } from './product/product.component'; import { MembersComponent } from './members/members.component

Angular Ionic 2 : Loop through List of Arrays in Object

I have a browser console output from JSON which contains list of arrays in an Object. I need to print the name field of objects(Turmeric Powder, Coriander Powder) in a list . Tried using the following code but error which says Cannot read property '3' of undefined Json Response [{"product_id":"40","sku":"HOS001","name":"Turmeric Powder","set":"9","type":"configurable","category_ids":["2","3"],"website_ids":["1"]},{"product_id":"41","sku":"HOS001-20 grms","name":"Turmeric Powder-20 grms"

Using Angular2 with EpiServer setup

Has anyone yet tried using Angular2 together with EpiServer ?. Any who have a tutorial for startup on such ?. Hope to hear from you. Best regards

Angular Unhandled Promise rejection for SelectItem

I am getting this error between my app.module.ts and my app.welcome-panel-menu-list.component.ts. Can someone point out to me what the problems is? app.module.ts: import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { CommonModule } from '@angular/common'; import { AppComponent } from './app.component'; import { MenuBar } from './app.menu-bar.component'; import { WelcomePanel } from './app.welcome-panel.component'; import

angular 4 viewchild nativeElement offsetWidth changing unexpectedly

I have a component like so: import { Component, OnInit, OnChanges, ViewChild, ElementRef, Input, Output, ViewEncapsulation, EventEmitter, AfterViewInit } from '@angular/core'; import * as d3 from 'd3'; @Component({ selector: 'coefficient-histogram', templateUrl: './coefficient-histogram.component.html', styleUrls: ['./coefficient-histogram.component.css'], encapsulation: ViewEncapsulation.None }) export class CoefficientHistogramComponent implements OnInit { @ViewChild('coefficienth

Angular 4: Get all properties that are decorated with @Input

I have an input component that has a variety of properties, and some of them are decorated using the @Input decorator. How can I see at runtime which of these properties have the @Input decorator? So for example with the following class: export class MyInputComponent { @Input() min: number; @Input() max: number; ignoreMe: number; } I want the following result: > [ 'min', 'max' ]

Angular CDK Overlay to one component

I am trying to use the CDK Overlay to add a material spinner as a loading indicator over the top of a specific component. However, when I set hasBackdrop to true the entire application is grayed and disabled. I am trying to pass in the viewContainerRef from the component and am using connectedTo positioning. I can move the spinner location around, but not alter the area being disabled by the backdrop. @Injectable() export class WaitIndicatorService { overlayRef: OverlayRef; constructor

angular 2 checkbox checked=true is not working

home.ts <div class="col-xs-12 col-sm-3 col-md-3 radios"> <input [(ngModel)]="SEARCH_TYPE" [checked]="true" type="radio" name="SEARCH_TYPE" placeholder="Starts With" title="Starts With" tab-index="" value="S" /> </div> <div class="col-xs-12 col-sm-3 col-md-3 radios"> <input [checked]=true [(ngModel)]="SEARCH_TYPE" type="radio" name="SEARCH_TYPE" placeholder="Contains" title="Contains" tab-index="" value="C" /> </div> Here the second input checkbo

Angular TypeScript compiler failed with exit code 1 with

I am getting above error when trying to run the android emulator within my native script project folder. I tried by upgrading the versions of tsc, tns, node and npm, and also removed platforms and node modules from the project and re-run the tns run android command. but couldn't resolve this error. I am new to native script. any help is appreciated. Thanks! My package.json and tsconfig.json file is below package.json `{ "description": "NativeScript Application", "license": "SEE LICENSE

Usage of Papaparse with Angular 2: Cannot find name 'Papa'

I am working on a project where I upload a csv file and parse it to view the results in a list. Everything worked fine untill I deleted my node_modules to re-install them to get rid other errors. When I did npm updated my node modules again the definition of 'Papa' can not be found again and I don't know how to let Angular 2 find the name 'Papa' so that my application works again. I tried adding import {} from '../../papaparse.min.js' to reference to the location of the papaparse file but this

Map doesn't exist on Observable<Object> with angular 6.0.0 and rxjs 6.1.0

Hi I'm trying to follow a tutorial on angular but the tutorial was made in September. I believe the person used angular-cli 1.3.2. I'm not sure which version of rxjs he was using. I'm using angular cli 6.0.0 and angular 6 with rxjs 6.1.0. I am running into a problem where calling .map on observable is not found. ERROR in xxx/xxx/dataService.ts(19,14): error TS2339: Property 'map' does not exist on type 'Observable<Object>'. I looked into the Observable class and I don't see a function ca

Angular, dynamic styles between style tags

Looking to update values between style tags depending on input given by user, can't use class binding in this case. I can make inline styles work, the only issue is hover styles and media queries, so this isn't a solution either. Is there any way so that this variable can be applied for a css value between style tags? @Component({ selector: 'app-teststyle', template: ` <h1>Text ({{color}})</h1> <style>h1 {color:{{color}}}h1:hover{color:{{colorHover}}}</style>

Angular 5 chart.js onclick returning empty array

I'm trying to get the onclick function in chart.js to work, and found out about the getElementsAtEvent(event) function that should return an array containing the data of the part of the chart that I click, but it's constantly returning an empty array. Here's my code: var canvas = this.el; //this is an elementref canvas.onclick = (event) => { var data = this.chart.getElementsAtEvent(event) console.log(data); } this.chart = new Chart('canvas', { type: 'bar', data: { labels: ["Bro

Angular How to solve Error: Metadata version mismatch for module found version 4, expected 3

During the production build in my Ionic application I have this error: Error: Metadata version mismatch for module C:/Users/p/Desktop/p/trunk/p/Work/node_modules/ionic2-calendar/calendar.module.d.ts, found version 4, expected 3 This is my package.json, does it look good? { "name": "ggggg", "author": "Chris", "homepage": "none", "private": true, "scripts": { "clean": "ionic-app-scripts clean", "build": "ionic-app-scripts build", "ionic:build": "ionic-app-scripts buil

Using a class to pass query parameters to HttpClient in Angular.io

I read in this post that I could use fromObject in HttpParamsOptions to use an object as my query parameters on a query. Unfortunately I'm having some issues getting the Object to be in the right shape. I thought that it would be able to consume an object that had all strings for types and am not sure how to cast it into the right shape. I'd prefer not to have to iterate over object keys to get things to fit into this box - it loses all its value if I have to do that. Can anyone explain to

Angular Two radio buttons related in Ionic 2

How can I translate this to Ionic 2 ? <div class="weightunitradios"> <ion-checkbox class="checkboxes" ng-model="data.weightunit" ng-true-value="'kg'" ng-false-value="'lbs'" ng-change="saveWeightUnit(); changeMinMax(); convertWeightInput(); saveUserWeight();"> kg </ion-checkbox> <ion-checkbox class="checkboxes" ng-model="data.weightunit" ng-true-value="'lbs'" ng-false-value="'kg'" ng-change="saveWeightUnit(); change

Cannot get variable from material theme in Angular 7

I have Angular 7.0.3 and I'm trying to get create scss variable with the primary color of my material theme // src/styles/_variables.scss @import "~@angular/material/theming"; @include mat-core(); $app-primary: mat-palette($mat-indigo); but getting this error ERROR in ./src/app/app.component.scss Module build failed (from ./node_modules/sass-loader/lib/loader.js): undefined ^ (50: #e8eaf6, 100: #c5cae9, 200: #9fa8da, 300: #7986cb, 400: #5c6bc0, 500: #3f51b5, 600: #3949ab,

Angular Adding a class on elements created with a loop past a certain index

I'm trying to use ngClass to add a class on any span elements after the fourth one is added to the DOM (happens via a button click that increments a counter variable and also toggles the visibility of a paragraph), but I don't know how to make this to where any of the first four spans do not also get this class added once the fifth one is reached. I feel like this is easy to accomplish, but I'm stuck. I tried adding an index to the *ngFor and then adding the class based on the index but that pr

Angular RxJS subscribe inside subscribe with actions on error

I have code with subscribe inside subscribe: this.http.post('/update1', newData).subscribe( (response) => { const r = response.json; const id = r['id']; this.http.post('/update2?id=' + id, newData).subscribe( () => { this.http.post('/update3?id=' + id, newData).subscribe( () => { console.log('success'); }, () => { // reve

Angular Prevent outer component mark up to be rendered

I am importing a component into my page: <div> <p>Here is my component:</p> <my-component></my-component> </div> How can I prevent the physical HTML of <my-component></my-component> from being rendered in the markup, and just use the html there has been declared within the my-component template? Right now I get: <div> <p>Here is my component:</p> <my-component><div>This is the inner html</div><

Expect an observable to fail in a test in Angular / Karma / Jasmine

I have a component that eventually calls a bunch of HTTP services via successive switchMap to fetch data from backends. I want to test the error handling part. The app has a global error handling (ErrorHandler) and a local error handling via catchError. The method to test looks like this one : public methodUsingObservable() { this.someRequest() .pipe(catchError((error) => this.handleError(error))) .subscribe(console.log); } Handle error check if the error is linked to

Angular Look for matching values in 2 separate JSON files

I have the 2 following JSON files which are stored locally in my project folder. File 1 {"_links":{"self":[{"href":"http://val1"},{"href":"http://val2"},{"href":"http://val3"},{"href":"http://val4"},{"href":"http://val5"}]}} File 2 {"_embedded":{"accountList":[{"accountNumber":"1234","link":{"href":"http://val3/newAccount"}}]}} I am trying to write a function which looks for matching values(specifically the 'link' values) in the 2 files. The second file however has additional url paramete

IdentityServer4, Angular and .NET CORE Api

I'm using IdentityServer4 with ASP.NET Identity and Angular for the client. All is good and working as I expect when I have a user logged in. The question is regarding securing access to the Api to just my Angular app for anonymous users. For example I don't want just anyone accessing the endpoint to create users. Does the Angular app need to get a token to using the client credentials? This token would then be used for anonymous users. New to OAUTH and trying to get my understanding straight.

MIME type issue in Angular

I am getting the following error when I try to load my home page and the page is blank. main-es2015.5ff489631e1a2300adb7.js:1 Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec. runtime-es2015.2c9dcf60c8e0a8889c30.js:1 Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html". Strict MIME type checking is enforced for module scripts per

Angular Material Mat-Table datatable is not rending data from nested objects

I am writing an angular material mat-table with a datasource but it is not rending any data Here is my data type interface IProfile { jobTitle: string; startDate: string; endDate: string; } interface IAddress { name: string; address: string: city: string; state: string; country: string; county: string; zipcode: string; } interface IEmployee { profile: IProfile; address: IAddress[]; } dataSource : MatTableDataSource<IEmployee >; dataSource.data = this.testData;

Angular Ivy compilations throws "Attempted to get members of a non-class" error

With Angular CLI 8.2.2 I tried to compile an app using Ivy. It throws an error I can't grasp: Attempted to get members of a non-class To be more explicit : ERROR in Attempted to get members of a non-class: "export class CustomHttpUrlEncodingCodec extends HttpUrlEncodingCodec { encodeKey(k) { k = super.encodeKey(k); return k.replace(/\+/gi, '%2B'); } encodeValue(v) { v = super.encodeValue(v); return v.replace(/\+/gi, '%2B'); } }" The code d

Angular I'm trying to implement a Material Sorted

I'm trying to implement the Material Sorting, using this reference: https://material.angular.io/components/sort/overview The unique difference is that I'm loading my data after changed a select control. When I click at the column, to theoretically sort the data, nothing happen. could someone help me? Sort Data method: sortData(sort: Sort) { debugger; const data = this.colaborators.slice(); if (!sort.active || sort.direction === '') { this.sortedColaborators = data; return; } this.sort

Angular How to clear observable array before sending API call to refresh the data?

I have an application that is calling an API every x seconds / minutes to get the most up-to-date data. However, I am having an issue where the data keeps doubling on refresh. How can i clear the data before fetching the most recent values? api-call.service.ts private _earthquakeData$ = new ReplaySubject<EarthquakeResponse>(1); constructor(private readonly httpClient: HttpClient) { } getEarthquakeData(): Observable<EarthquakeResponse> { // return the subject here

Saving data in sessionStorage as undefined in angular

Im saving the address data in the sessionstorage but it shows undefined where other data are saving fine and im able to retrive the data also.can anyone suggest what is the problem here helper service /**ENCRYPT the value */ encryptValue(data: string) { if (data) return CryptoJS.AES.encrypt(data.trim(), environment.ENC_SECRET_KEY.trim()); } /**DECRYPT the value */ decryptValue(data: string) { if (data) return CryptoJS.AES.decrypt(data.trim(), environment.ENC_SECRET

Angular What is the best practice for writing e2e tests that need to run in a sequence?

We are in the midst of writing e2e tests for our angular app using Cypress.io. The problem we are facing is that even though we know that tests should not depend on each other, but realistically speaking it seems impossible to achieve this in a real world app. Suppose a user needs to perform the following actions Signup Login Create a category Create a sub-category Crete a product in a specific sub category Now if we have to write tests for these scenarios, we will either have to write one gia

Office Add-in Angular app by Yeoman generator: Component must have a template or templateUrl [with Webpack], even though it's declared

We are using Webpack and Angular template with require syntax like below in officeJS Add-In. @Component({ moduleId: module.id.toString(), selector: 'list', template: require('./list.html') }) We are getting error Component 'List' must have a template or templateUrl on Component declaration. I don't have much detail about Webpack, but with templateUrl application not working (might be because of with webpack/system.js), Application is not able to get HTML by templateUrl at runtime. B

Cannot install angular CLI as root user

I just tried to install angluar CLI as root user with the command npm install -g --unasafe-perm @angular/cli and I'm having the following issue : root@ubuntu-:~/test# npm install -g --unasafe-perm @angular/cli npm WARN deprecated har-validator@5.1.5: this library is no longer supported npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142 npm ERR! code 127 npm ERR! path /root/.nvm/versions/node/v15.14.0/lib/node_modules/@angular/cli n

Get the username from BehaviorSubject and show the username in the header section needs refresh after login in Angular 11

I am creating an angular application. I have AuthenticationService class. Here after login I am putting the account object into a BehaviorSubject observable. So that I can subscribe the observable and get the necessary information of Account object. Here is my code: private accountSubject: BehaviorSubject<AccountInfo>; public account: Observable<AccountInfo>; constructor( private router: Router, private service: ApplicationService) { // behaviour sub

Angular Service returning generic observables of multiple types(potentialy) - can not subscribe

I'm building an app using Angular. I've looked for a solution but I couldn't figure out one. I've created an abstract service with generic type of T: export abstract class AbstractService<T>{ public _url; abstract getRequest(): Observable<T> | Observable<T[]>; abstract postRequest(val: T| null): Observable<T>; } when I try to subscribe to the service, I get a compilation error: this.service.getRequest().subscribe((data)=>{...}) I want the comp

Angular Where is the Google Public Key for JWT validation?

I have an Angular11 UI front-end utilizing Google's RS256 authentication by import { SocialAuthService, GoogleLoginProvider, SocialUser } from 'angularx-social-login'; in app.module.ts adding providers: [{ id: GoogleLoginProvider.PROVIDER_ID, provider: new GoogleLoginProvider('my Google-Client-ID')}] When Google sends me back the JWT token, I send it to my NodeJS App server to establish a JWT-based communication for the session, so this NodeJS App server must validate this JWT. According to th

  1    2   3   4   5   6  ... 下一页 最后一页 共 561 页