Questions tagged [angular6]

1

votes
3

answer
1.2k

Views

ExpressionChangedAfterItHasBeenCheckedError invoking toastr in ngInit in Angular 6

After registering, user is redirected to login page, with a ?welcome=1 param in the URL so that it can display a welcoming toast. in Login component, I have: ngOnInit() { ... if (this.route.snapshot.queryParams['welcome']) { this.toastr.success('Register Successful, please login'); } } and I get hi...
1

votes
2

answer
2.3k

Views

How to Programmatically Trigger 'Click' Event in Angular 6?

Essentially, I want to trigger the input button in the page using TypeScript
RedOne
1

votes
2

answer
9.5k

Views

How to set value to Form in Angular 6 using FormControl

Group Select {{group.name}} How can I set the value of the field to Select dynamically in the Component? I looked at the docs, https://angular.io/api/forms/FormControlName#use-with-ngmodel but still no example that can help me. Attempt: this.gGroup.get('groupControl').setValue('Select');
chris
1

votes
2

answer
2.4k

Views

Return when subscribing. … Type 'Subscription' is missing the following properties

I am subscribing a response from an Angular service: books: BookModel[] = []; constructor(private bookService: BookService) { } ngOnInit() { this.books = this.getBooks(); } getBooks(): BookModel[] { return this.bookService.getByCategoryId(1).subscribe((payload: Payload) => { return payload.result.ma...
Miguel Moura
1

votes
1

answer
695

Views

Angular 6 Library - Could not resolve entry

I am getting the following error while building the angularlibrary project. Building Angular Package Building entry point '@abc/lib' Compiling TypeScript sources through ngc Bundling to FESM2015 BUILD ERROR Could not resolve entry (C:\Dev\abc\build\dist-npm\esm2015\abc-lib.js) Error: Could not reso...
Abhishek
1

votes
1

answer
41

Views

Angular reactive form returns empty values when fields are untouched

In my use case when the user clicks on the edit button, Angular makes an HTTP call to the backend and retrieves the object, then populates those values on EDIT form. The user can update or leave the fields untouched. When clicked update button, Angular should take all those values present in form an...
Jadda
1

votes
2

answer
64

Views

share data between sibling components while both of them use *ngIf

So I have a parent component, that hosts 2 sibling components. something like this so I get the error that sibling1object.somedata is undefined but when I remove ngIf() from 1st div, the error disappears. It doesn't matter if *ngIf resolves to true or false. so i get the error even when sibling1...
Kristjan
1

votes
1

answer
32

Views

Aysnc validator angular 6

I am tryin to check username availablity on typing username using a rest api. I am using angular forms for validators. From backend I get true is username exists and false if not. I am using below code : this.registerForm = this.formBuilder.group({ userName: ['', [Validators.required, this.userNameV...
user9040429
1

votes
4

answer
32

Views

How to highlight column in table angular 6

Im trying to highlight entire column in table on hover. Can someone help me how I can achieve this in angular2+ I need exactly like the below image reference image
D C
1

votes
2

answer
35

Views

To display other JSON objects based on their ID

I have 2 JSON files called teachers and sessions as shown below: teachers [ { 'name': 'Teacher 1', 'sessionId': '02' }, { 'name': 'Teacher 2', 'sessionId': '03' }, { 'name': 'Teacher 3', 'sessionId': '01' } ] sessions [ { 'id':'01', 'name': 'Session 01' }, { 'id':'02', 'name': 'Session 02' }, { 'id'...
PGH
1

votes
1

answer
44

Views

How to access values from JSON response which is in [object Object], [object Object] in Angular 6

I have a JSON response , Below is my response. { 'data': [ { '2': [ { 'name': 'Test1', 'Address': 'Test2' }, ] }, { '5': [ { 'name': 'Test3', 'Address': 'Test4' }, ] }, ] } I am able to access till data from the response.Here '2' and '5' are date.If one date is present in this json response then for...
ananya
1

votes
7

answer
48

Views

To restrict the JSON data to fixed length

I have an JSON file called customers,as show in the below: customers.json [ { 'name': 'Customer 1', 'id': '01' }, { 'name': 'Customer 2', 'id': '02' }, { 'name': 'Customer 3', 'id': '03' } , { 'name': 'Customer 4', 'id': '04' } ] For this JSON i need to perform two operations: On loading the compone...
Shankar
0

votes
0

answer
13

Views

PrimeNg TurboTable - Cell width not matching header width

I have a TurboTable with row grouping and row expansion, based on this post. {{rowData[groupField]}} {{rowData[col.field]}} The class table-action-element enforces width: 30px;, which can be seen in the headers. However, when I expand the row group, the row columns that appear do not have this width...
naman1901
1

votes
3

answer
343

Views

Create new child formGroup into formGroup - Angular 6

I have an angular 6 app. And I have a form like below stackblitz. PERFECTLY WORKING SAMPLE But, I want create a shared country-state component. And I want to call when I need. So, I convert my project into below stackblitz. But, I don't want create new form group for country-state. I want to use fro...
realist
1

votes
2

answer
91

Views

How to trigger primeng colorpicker using a button?

Here is stackblitz link:- https://stackblitz.com/edit/angular-gtv8vo?file=src/app/app.component.html Here, colorpicker is not opening while click of a button? How to open color pallete onclick of button? Add COlor
Mahi
1

votes
1

answer
31

Views

Displaying certain array elements in ngFor

I am fetching data from an api which is giving me table content in form of array of arrays where first array has all the column names and subsequent ones have the data. Now I want to display the first array elements in thead and rest in tbody . As far I have tried using | slice:0:1; but for setting...
user9040429
1

votes
3

answer
50

Views

Angular Material fixed side bar header not a fixed

Im tried to crate Angular material Fixed side nav , but I face some conflict on my projects, My issue is side bar header not fixed, i added content details and scrolls the content then header is hide, Stack blitz code here how can I fix this issue please help me to fix this one Thanks. My code sid...
core114
1

votes
2

answer
47

Views

To display object properties based on its ID

I have component called list in which i will display all my customers list as in below image: and selecting particular customer i will emit that customer id and i will display that id in another component called display: Instead of displaying the customer id how can i display that id's properties(fo...
Shankar
1

votes
1

answer
55

Views

Set top property of a div element

I would like to change a top and left property of a div element. I tried to modify it using renderer2 and method setProperty, but without luck. My code: this.renderer.setProperty(this.element, 'style.top.px', this.circle.center.y); this.renderer.setProperty(this.element, 'style.left.px', this.circle...
Aleksander Burzec
1

votes
4

answer
69

Views

To close dialog component based on api response

I have component called AddCustomerComponent which i am calling as dialog component,In the AddCustomerComponent after filling the input fields i am performing POST operation.Now POST operation working fine. But after POST operation based on the api response, I want perform following operations: If P...
Empty_Soul
1

votes
2

answer
256

Views

How to downgrade angular7 to angular6

I have tried to downgrade angular 7 to angular 6 by running the following npm commands: npm uninstall -g angular-cli npm cache clean npm install -g [email protected] However angular/cli 7 version is still displaying in my package.json file. I need help to downgrade angular7 to angular6.
SaranViji
0

votes
0

answer
4

Views

Ways to integrate the Jira issue collector with an Angular app?

I'm looking to create an Angular 7 app that utilizes the Jira issue collector to submit issues directly to their respective projects. When I build the app the way it is now, nothing happens. When I move the code from method 'submitIssue' to under 'ngOnInIt' directly the issue collector dialogue come...
sgovernale
0

votes
1

answer
25

Views

How access the other JSON object based on their ID

SCENARIO: I have 2 JSON files called tasks and workers as shown below: tasks [ { 'taskName': 'Task - 1', 'workerIds': ['01','03','04'] }, { 'taskName': 'Task - 2', 'workerIds': ['01','02'] }, ] workers [ { 'id':'01', 'workerName': 'Woker - 1', }, { 'id':'02', 'workerName': 'Woker - 2', }, { 'id':'03...
Shankar
2

votes
4

answer
29

Views

Angular 6 custom validation return type

I have this code in my project for custom validation but I am unable to understand what does : (group: FormGroup) => ValidationResult mean here? I understand : (group: FormGroup) means return type but then what does => ValidationResult mean here? static comparePasswords(passwordKey: string, confirmP...
Mrug
1

votes
1

answer
9

Views

How can i divide the tooptip large data in different columns 10 per column

chart = c3.generate({ bindto: '#yearly', data: { x: 'x', columns: [ [x,1,2,.....,100], [data1,10,20.....,30], [data2,15,16,......,90], . . . [data50,20,30,......,80] ] } }); In my tooptip 1 to 50 row are show but i want to divivde them in colomns with 10 rows like- data1 - 10 | data 11 - 10 ....
Nandini
1

votes
0

answer
183

Views

I want filter to JSON data using Angular 5 services, but filtering should be done on server level (Live Search)

I know there's a concept of pipes, but for pipes to work it should have all the data. I am using Angular Services import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { Patient } from '../shared/patient'; import { Observable } from 'rxjs/Observable';...
Prasang
1

votes
3

answer
675

Views

Compile error after update Angular and RxJS 5 to 6

I'm having an issue after updating libraries to new Angular 6 and RxJS 6. I have RouteService class which is working as service. It uses HttpClient to get data from remote API. After update I'm getting some weird error when I try to compile project. Here's my service class: import {Injectable} from...
user3626048
1

votes
1

answer
568

Views

Migrating from Angular 5 to Angular 6 i got these error TypeError: You provided an invalid object where a stream was expected

These code was workig ok in Angular 5 but when migrating to Angular 6 I got the error message: ERROR Error: Uncaught (in promise): TypeError: You provided an invalid object where a stream was expected. You can provide an Observable, Promise, Array, or Iterable. TypeError: You provided an invalid obj...
1

votes
2

answer
840

Views

Angular6 rxjs 6 update

Hi I appreciate these are a pain. After updating Angular to version 6 and rxjs to version 6 we are getting a lot of browser errors that the system is unable to instantiate a number of packages. We use a combination of node_modules and systemjs.config.server.js without trying to start an argument o...
Lewis
1

votes
0

answer
1.1k

Views

angular 6 router navigation not working

I have migrated my angular application from angular 5 to 6, when I am calling router navigation, this.router.navigate(['doctor-log-in']).then(function (res) { console.log(res); }, function (err) { console.log('in errrrr'); console.log(err); }); it's giving Below Error main.9819f0c7d0ec0efd5341.js...
1

votes
1

answer
210

Views

Angular 6 router navigation giving error Cannot read property 'OVERWRITE'

I have migrated my angular application from Angular 5 to 6, when I am calling router navigation, this.router.navigate(['doctor-log-in']).then(function (res) { console.log(res); }, function (err) { console.log('in errrrr'); console.log(err); }); it's giving below error main.9819f0c7d0ec0efd5341.js:1...
1

votes
1

answer
239

Views

Updating the Angular app from version 4.x.x to 6.0

I have a very big project with a lot of components. Actually it is an open source project to which I am contributing.It was built on Angular 4. Currently it is running on Angular 4. I am trying to update it by following this site https://update.angular.io/ and manually searching for use of each depe...
bro33
1

votes
0

answer
110

Views

Components containing public dialog: MatDialog, in constructor fails to load

After upgrading from Angular 5.2 to 6 The app fails to load components components containing public dialog: MatDialog in the constructor. building/serving using --prod flag. (Works fine using ng serve and ng build.) Console error when using --aot: Error: Uncaught (in promise): TypeError: factory is...
Kake
1

votes
2

answer
630

Views

Cannot read property '1' of null - Angular 6 Update

I keep getting this error when trying to upgrade by Angular 5 project to Angular 6 when running ng update @angular/cli: Error: Cannot read property '1' of null Cannot read property '1' of null I'm following the update guide exactly, but not sure why this is happening. Has anyone come across this?
1

votes
3

answer
393

Views

http-server -p 8080 does not serve my angular application. Whereas ng serve does

This is what I see when I open my localhost I want to make a PWA with Angular so I followed the instructions on the angular.io website to the smallest detail yet it doesn't open the usual 'Welcome to your app' page. What might be the problem? I am have the following installed: Angular CLI: 6.0.1 No...
Captain A
1

votes
0

answer
426

Views

Issue with loading third party library in Angular 6

Issue with loading third party library which is dependence on another third party library. In my case, i'm using bootstrap(v3.3.7) which is required JQuery. I included these libraries as per angular suggested way and successfully compile the application, if run it in browser i got a console error. V...
santhosh k
1

votes
1

answer
60

Views

Cannot import MaterialTimeControlModule after installation

I am trying to install https://github.com/SteveDunlap13/MaterialTimeControl under Angular 6. The installation succeeds without errors but I still cannot import the MaterialTimeControlModule. All I can see is in my node_modules/ this is the only directory which is not marked as 'orange' so I guess th...
displayname
1

votes
0

answer
756

Views

Angular 6 - httpClient Error message not from response error data

I am using Angular 6 httpClient and I am having issues with the error responses. Here is the code: postIt() { return this.http.post(URL, { ...httpOptions, responseType: 'text', observe: 'response' }).subscribe( result => { console.log(result); }, error => { console.log('There was an error: ', error)...
Paul B
1

votes
0

answer
28

Views

Pass element refrence to self from DOM back to view model

Known feature: this passes the div back to the VM for manipulation, etc. What I'm looking for is short hand to pass an element to a method without declaring a template variable. It could look like this: This would be helpful in cases where creating elements in an ngFor stops you from giving every el...
Scott Clark
1

votes
0

answer
325

Views

Ionic 3 keyboard plugin not working

I have a chat app which shows the user the keyboard when they tap the input. Using Ionic's documentation I have added the onKeyboardShow() observer to my ts file. However it will not fire, no matter where i place it. The keyboard can be shown and hid over and over and nothing is ever fired. import {...
user3024827

View additional questions