Newest 'angular2' Questions

Q&A for professional and enthusiast programmers

ReactiveForms with nested content

In my project I have two tabs with ReactiveForms where the form's content is a nested component. I've tried to fix the error Error: formGroup expects a FormGroup instance. Please pass one in. ...

Angular 2 set animation input from component's class

Is it possible to set the inputs of the style in the states of the animation from the class (or anything inside the animation)? For example, instead of 'translateX(250px)', do something like '...

How to do colspan/rowspan in kendo ui angular 2?

How would I do this in kendo grid - angular 2. I tried out rowHeight and detailRowHeight but it doesnt seem to make any changes. <table class="table-bordered"> <tr> <...

Angular2 parent -> child -> parent binding

I've seen the following piece of code at work - http://plnkr.co/edit/5z4VEQ?p=preview <app-component2 [(value)]="value"></app-component2> You can see that we pass a value to a child ...

How to use angular 2 service which returns http promise

Night! I have a trouble with angular 2 here. I use service that return promise but when i try to retrive the response i got an error. i was read this this stact question this my code. this is ...

How to avoid duplication of code in the forms Angular 2?

All my reactive forms usually include properties and methods: @Input() public form: FormGroup; public messages = VALIDATION_MESSAGES; @Output() public onFormSubmit: EventEmitter<any>...

How to do a global search in angular 2?

I'm a new developper in angular2 and I want to do a global search in an array of json objects. For example, this array : invoiceList = [ { invoiceNumber: 1234, invoiceSupplier: "...

Should I go for AngularJS 1 or AngularJS 2? [on hold]

I know there is no correct answer to this question, but I'm going to ask anyways. So I'm just out of my apprenticeship and I got very lucky and got a nice job where they use AngularJS. Now the problem ...

Angular2 : Bind view with callback variable

In my angular2 project, I read a csv file with FileReader. After the onloadend callback I have a variable which contain the content of my csv file. Here my component.ts : items: Array<any> = []...

Angular 2 - pdf opened in new tab is always blank

I am trying to link to a local PDF file via standard <a> tag. Somehow all PDFs that it opens are completely blank - although it correctly opens the new tab and also loads the corresponding file ...

How to loop through asynchrous calls sequentially?

I am using Angular2. The logic I want to implement is first to get the total page number, and then, I would like to loop through as many as obtained page number to get the items from server. However, ...

What prevents my AngularJs 2 application from running the commands shown in the inspector?

I am experimenting with Angular 2. I use npm start to create a live coding environment in Chrome, and I am seeing unusual behavior. An earlier version of my code base appeared as follows in the file ...

ionic2 camera image do not show entire image in template

I am trying to use camera in my ionic2 app. I take picture with following function: takePicture(){ Camera.getPicture({ sourceType: Camera.PictureSourceType.CAMERA, ...

How to make pages animation effect like Ionic 2 in Angular 2

I'm trying to make the same effect for pages navigation in Angular2 like Ionic 2. https://ionicframework.com/dist/preview-app/www/?production=true&ionicplatform=ios I want to emphasize: I don't ...

How do I @require a .styl mixin library into Angular 2 component stylesheet?

In angular-cli, what configuration steps should I take in order to successfully @require a stylus file in a component's .styl stylesheet? If I have a package installed at node_modules/my-helpers/ (...

FileReader : return callback variable into global variable [duplicate]

I use angular2 in one of my project. I would like to display one of my global variable in the view. However this value its initialized into a FileReader, and I cannot pass the callback result to my ...

Cannot find module at webpackEmptyContext when change route

I have multi angular application. ui-router in angular 1 used required to get html template and controller. Now after bootstrapping with UpgradeModule when i use require or System.import when try to ...

woff2, woff and ttf files not loaded and gave 400 error

Why woff2, woff and ttf files are not loaded, however they are exist in "assets" folder? Please suggest!

Test freezes when expect(result).toBe(null) fails test. (Angular 2, Jasmine)

I have a test that checks if part DOM element has been removed by an ngIf. When I check the DOM using: fixture.debugElement.query(By.css(".button-area")) the result is either null or a DOM element. ...

I am posting from angular2 to net core and getting: failed to load resource the server responded with a status code 415 (unsupported media type)

I am posting stop object from angular2, this is the code addStop(stop: IStop): Observable<IStop> { let headers = new Headers({ 'Content-Type': 'application/json' }); let ...

Angular 2 Observables - Need to wait until operations are done before running Observable

I've been slowly getting the hang of observables, though Firebase seems to require you to do a lot of crazy stuff with them in order to get achieved results :P Basically, I have a function where I'm ...

How to call Typscript method from Javascript callback method - Angular2

I am using angular2 my issue is that I am not able to call component method from javascript callback here is the code snippet. declare var OBI_CORE_FACTORY:any; declare var ObiDomain:any; declare ...

Get started with angular2 and java

I have just learnt how to develop with angular 2, i need a tutorial conbine with angular 2 and REST APi with java is there any usefull tutorial to get started

How do I include libphonenumber-js in my angular2 app using systemJS?

After installing https://github.com/halt-hammerzeit/libphonenumber-js using npm and updating my systemjs.config.ts to include map:{ ... 'libphonenumber-js': 'node_modules/libphonenumber-js' },...

Aspnetcore with angular2

I am new to this Webpack module bundle. All I want to bundle some files including css, js, png etc from this assets directory, but I can't figure it out how to implement this in the yeomen generated ...

Angular2 Filter Data From List

I am developing angular2 application with typescript. I need to filter Users by corresponding to input text box. Table after filtering data Input text box Result HTML Table view users.html <...

Angular2 - embedding flash game - game shows up for a moment and disappears

I'm developing a website in angular2 which requires embedding flash games. The problem is that when I navigate to the Game's view I don't see the game in the <embed> spot. If I force-refresh the ...

Angular 2 get the value of a single entry in a JSON array

like the title says, I am trying to get some values of an JSON array which only holds one object. I need to parse everything inside the component to work with the values. I finally need the values of ...

Ionic2 tabs - Load different page/component based on data from service

I have a app that has 4 tabs, the first one being "home" and it has a home.html, home.ts etc. I also have another page called "details", depending on a service call if a certain field is null then i ...

When i select course1 right arrow should get down(only for one selected item)

Here I have created one sample side menu. When iam selecting one Item(course1) Right Arrow should Show as down arrow in only one <li> But it is in ngFor. It is applying for all menu items(...

Angular2 Not Recognizing component From Imported Module

I'm playing around with Angular2, and trying to have one module (BreadcrumbDemoModule) import the component of another (BreadcrumbModule). Currently, BreadcrumbModule contains only one component: ...

Building an SVG upload and edit element in Javascript

guys, I am working on an Angular project which will include an element that will enable users to upload an SVG map and drop pins on it to mark various places, then save it. Any recommendations on how ...

Why this.store.select(“uiState”) return an empty object in rxjs/store (2.0+)

I have this code in my effect/store: @Effect() newMessages$ = Observable.interval(5000) .withLatestFrom(this.store.select("uiState")) .map(([unreadMessages, uiState]) => new ...

Why would you need canActivate and canActivateChild at the same time in Angular 2 Router?

I am going through the official examples of Angular 2 Router here: https://angular.io/docs/ts/latest/guide/router.html And I came across this: const adminRoutes: Routes = [ { path: 'admin', ...

Use @angular/flex-layout as a grid layout

I'm trying to create a grid-layout like using flex-layout provided by the Angular team. Here's what I want : Here's what I have : I'm trying to do it with only one row that has the wrap parameter, ...

Node's and Electron's modules from inside Angular2

I am developing an Electron application using Angular2. In the electron's main.js I am referencing/loading the NG App: const {app, BrowserWindow} = require('electron') const path = require('path') ...

Is there a way to use Angular 2 on jsfiddle or plunker without systemjs?

I have been exploring for a minimal Angular2 implementation on plunker or JsFiddle to use when exposing specific features either with other team members or on blog posts. So far I come to the ...

Automatically refresh browser for ASP.NET Core based Angular 2 app changes

I recently started using Angular 2 with ASP.NET Core. I use Webpack to get rid of the auto-loading mess from SystemJs, which caused my app to load horrible 400 js-files for hello world in Angular. I ...

Angular2 dynamically access this object typescript

In an Angular2 typescript component I have the following local variables teapot10: boolean = false; teapot20: boolean = false; teapot30: boolean = false; I want to use these dynamically in a ...

Rxjs5 Testing With Angular 2

I have an Angular 2 service connected to the Angular Http service with Rxjs 5 to connect to a restful web service. The getObjects call simply returns the parsed Json in the form of an Observable array ...

Strategies to link RXJS operations in ngrx/effects to call Firebase for different operations before calling an Action

I have a situation I do not know how to handle. The situation is to long pull Firebase, get some data as observable back to the ngrx/effects, and then call Firebase again to delete some data and then ...

Tooltip content as table on primeng tree node

My application has primeng Tree and the requirement is to show a tooltip in tabular format on Tree Node. Please refer attached screenshot Any help on this is appreciated.

How do I set default value on md-select component from angular 2 material design?

I have the following select component that gets populated from a data coming from a rest api. How Can I set default selected value on md-select? <md-select placeholder= "...

Angular2 image relative to component

How can I create a component that uses an resource that is in the same folder? For instance, I want the background-image to be stored in component folder and then be able to use that component in a ...

How to prevent angular 2 component execution

I want to prevent auto component execution at the time page loading. I want to execute component based on our choice time. When page is loading that time component executing and appending html ...

Angular package ng2-table: what does this code statement mean?

Can someone tell me what this code statement means? this.rows = page && config.paging ? this.changePage(page, sortedData) : sortedData;

Angular 2: View not updating on array push

I have two child components. They are sharing data from a json file that I am loading using the http.get/subscribe method. For some reason, when I push data into the array, it doesnt update in the ...

Conditional Observable.forkJoin() building

Based on the parameters of the function I want to build the forkJoin() method. For example: if parameter1 is empty => don't put a http request for it inside the forkJoin() if parameter2 is empty => ...

Wrong checkbox is activated when *ngFor iterated <span> is clicked in Angular 2

Here's the issue: When I click on the text/span section of an element, the first checkbox in the section is selected. If I click on the checkbox only, the UI functions as expected. The amenityEmit(...

Angular 2 animations pass an Input

I need a way to configure my animations dynamically. For example, I want my consumer to be able to pass as Input of the numbers of the animate declaration or any CSS property. animations: [ ...
Translating... 0%