Questions tagged [angular7]
673 questions
0
votes
0
answer
2
Views
angular 7 how to access element by id defined in parent component from child component template
I am using primeng multiSelect control in the child component. i want this to be appended to the element defined in the parent component as shown above.
the above code failed when i run npm run build:prod. it can't access popupContent in the child. can anyone help how to access the parent element in...
0
votes
3
answer
29
Views
How to get value from checkbox?
Following is my template:
Education
when user check the box ( true ) I require to get the 'Education' as value in change event. how to get that.
this is required for filter purpose.
On console I am not getting value:
updateCategory(event){
console.log('event', event); //?
}
2
votes
1
answer
31
Views
How to prevent checkbox to be selected when click anywhere on row?
my row get selected when i click anywhere on the row even my radio button and slide toggle, i want it to be selected only when user clicks on checkbox
selection: SelectionModel = new SelectionModel(true, []);
@Output() approveSelectEvent: EventEmitter = new EventEmitter();
ngOnInit() {
this.selectio...
1
votes
0
answer
9
Views
The selector “app-root” did not match any elements after update to Angular 7
After updating the client app of an ASP.Net Core MVC SPA-project from Angular 5.2 to Angular 7, I receive the following runtime error when loading the app from index.html:
The selector 'app-root' did not match any elements
at DefaultDomRenderer2.push../node_modules/@angular/platform-browser/fesm5/pl...
2
votes
0
answer
15
Views
set z-index to the auto suggestion angular mention list
I am working with Angular 7.
I am facing a problem in setting the z-index to the list of the user that are coming with auto-suggestion.
I am using a text box in which if I type @ then it will give suggestion for all the available users.
for this functionality, I am using Angular mention directives b...
1
votes
1
answer
316
Views
Angular 7 relocate Assets File after Build
I have this sitemap.xml file in my assets folder under src:
When building my project via the cli with ng build --prod the resulting folder looks like this:
My question is simply how I can move the sitemap.xml file outside the assets folder when building my project?
1
votes
2
answer
1.4k
Views
Get previous route Angular 7
I created a little service where I can store the route changes.
import { Injectable } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
@Injectable()
export class RouteState {
private previousUrl: string;
private currentUrl: string;
constructor(private router: Router) {...
1
votes
1
answer
84
Views
Angular 7 routing doesn't work properly it refreshes the page
Here is the problem that I have:
I don't want to refresh my website when I select one of the tabs in my navbar. I'm new to angular and as I understand the router should route to a page without reloading the link.
My code in app-routing-module
import { NgModule } from '@angular/core';
import { Routes...
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...
1
votes
3
answer
276
Views
Getting route param as null in angular 7
I am unable to retrive the route param as null. I am using angular7.
Please find the code below
HeaderComponent ts file
import {Router, ActivatedRoute} from '@angular/router';
constructor(private httpService: HttpClient, private router: Router, private activatedRoute: ActivatedRoute) {
this.getNewsS...
1
votes
4
answer
55
Views
Clicking on a button fires other button which holds same event function
I'm working on an ionic project & in my project when I click on 1 button other button also changes their values as they have same event in it. But I want opposite of that, clicking on a button should only change a particular button's value.
HTML
{{record.name}} {{record.id}}
{{text}}
TS file
publ...
1
votes
2
answer
142
Views
Angular 7 : close menu when click outside
I would like to know whenever click is triggered inside parent div #menu, irrelavant of html tags exists inside it.
nativeElement.parent didn't worked for me.
HTML code:
Toggle Menu
I'm the menu. Click outside to close me
Angular script:
this.renderer.listen('window', 'click',(e:Event)=>{
if(e.targ...
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...
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
1
votes
2
answer
69
Views
How to set dynamic value to formControl in angular 7
I have drag and drop formBuilder we can able to create form using drag and drop so now i am facing problem i have hidden field in html which is TempleteJson.
Here is html code
Form Name:
CreatedOn:
Submit
Here is component.ts file
formBuilder: any;
formData: any;
data: any;
ngOnInit() {
var id = thi...
1
votes
2
answer
32
Views
OAuth token Unauthorized on browser
I'm using Angular 7 and I got a problem with Headers.
This is my code:
signin() {
let signinData = this.signinForm.value;
this.encoded = btoa('my-trusted-client:secret');
let header = new Headers();
header.append('Authorization', 'Basic ' + this.encoded);
header.append('Content-type', 'application/x...
0
votes
0
answer
27
Views
Ionic 4 and Angular issues in --prod --release
I am trying to build the ionic 4 application with --prod --release flags. But It shows the white screen with following error,
I have searched but unable to encrypt this error. The applicaiton is working fine during the ng serve and without these flags'. How to find what is 'L'
Error: Cannot resolve...
0
votes
1
answer
16
Views
Error: BrowserModule has already been loaded. in MDB-Angular Lazy Loading
i am facing this problem while creating the new project on MDB angular .
I have created multiple modules like public , tutor and student . public module is not lazy loaded while others are lazy loaded . public module is working perfect .
import { BrowserModule } from '@angular/platform-browser';
im...
1
votes
2
answer
1.1k
Views
Angular 7 Unable to include a custom typescript definition file
I created a custom typescript definition file (brat.d.ts)
export declare class head {
ready(callback: () => any);
}
export declare class Util {
static embed(divId: string, collData: any, docData: any, webFontsURLs: Array);
}
I am importing the above definition file in Angular 7 components like this...
1
votes
1
answer
151
Views
Angular - Duplicate Identifier "Input'
My component code is below
import {Component, EventEmitter, OnInit, Input, Output} from '@angular/core';
import {Input} from '@angular/compiler/src/core';
@Component({
selector: 'like',
templateUrl: './like.component.html',
styleUrls: ['./like.component.css']
})
export class LikeComponent im...
1
votes
2
answer
124
Views
Type is not assignable to type providedIn Property ProvidedIn is missing
I am trying to create a service with the help of Angular's tutorial https://angular.io/guide/http
I'm using Angular 7.0.7.
The service would get json data from some url:
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable
export class ProductLis...
1
votes
4
answer
50
Views
Conditional on route in HTML file issue
I found this code for detecting the current route but it does not seem to work in Angular 7.
Here is the code:
app.component.ts
import { Routes } from '@angular/router';
...
constructor(private router: Routes) {}
app.component.html
We are in someroute
How can I check the route in the .html of a comp...
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.
1
votes
3
answer
132
Views
How to pass data from component to ngBootstrap modal in Angular 7?
I have a table with data displayed using ngFor. I need to display an individual row data in a modal on click. i can log it in console by passing the row as click argument but not able to pass it inside the modal.
Assuming the table data is being fetched from a service and the modal is a template ref...
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...
1
votes
2
answer
55
Views
store json data into array in Angular TypeScript
I am facing a problem while I am using Angular mention library.
Here is my typescript code.
items: Object[] = ['jay','roy','gini','rock','joy','kiya'];
I am using this defined named items array in my component.html file
so it is creating a text box and it is giving suggestion when I am typing any us...
3
votes
0
answer
38
Views
Creating dynamic forms from api response in angular7
I have created a component to create dynamic forms using angular reactive forms. When I try to use the component to create form fields in another component depending on the response from my API. The created form becomes disabled for me, I am not able to edit the form in my browser.
I have used this...
0
votes
2
answer
24
Views
How to loop through an array and get the name corresponding to id and assign the result to another array
I am new to typescript .please help me in doing this.
I have an array as below.
let pets=[{id:'1',name:'animal'},{id:'2',name:'animal'}];
i want to loop through pets and get the names of animals from another array Category where
Category:[{id:'1',name:'Dog'},{id:'2',name:'Cats'},{id:'3',name:'Cows'...
2
votes
1
answer
29
Views
How to get angular item from $event?
I display on page an array of arrays of objects. And every object has a click event. I want to replace that many clicks events (now it is more than three thousand click events) by one click on wrapper.
For example, current code
{{cat.name}}
+
-
Desired code
{{cat.name}}
+
-
But in event.target I get...
1
votes
3
answer
33
Views
Table row on click function is not working in Angular7
I am trying to call a function whenever i click a row in an HTML table but it is not working and it is not giving any errors.
I've tried several things, and online code shows that the way i try it, it should be working.
My code is as following:
Html:
Userstories
New Story
{{story.id}}
{{story.name}}...
0
votes
0
answer
3
Views
ng2-canvas-whiteboard is not working in Angular7.3.5
I followed the instruction for installing ng2-canvas-whiteboard package, but I have a blank page.
Here is what I have done:
IN Module:
import { CanvasWhiteboardModule } from 'ng2-canvas-whiteboard';
@NgModule({
imports: [
CanvasWhiteboardModule,
]
In Component:
import { CanvasWhiteboardComponent, Ca...
1
votes
0
answer
5.7k
Views
Angular 7 Default select for dropdown not straight forward
I've been working with Angular 7 recently, and finding some strange stuff happening when trying to display a dropdown list, and showing a default value within this list. Here are two separate lists respectively:
sample.component.html
{{organization.name}}
I find that the above code displays the foll...
1
votes
0
answer
6
Views
Resetting staggering animation delay on newly generated elements
I am trying to implement a stagger animation when my page is loaded by getting an array of users from my API, then assigning this array to a local variable which is bound to a table with ngFor which then loops and displays the values.
I am currently using scss to create an animation delay variable w...
0
votes
0
answer
5
Views
ControlValueAccessor component not updating value in formgroup at angular 7
I'm using angular 7. And I created child component like below Stackblitz by ControlValueAccessor. I have a combobox and textbox in my form. And when I select item from combobox, then value of item set to textbox. But when I clicked 'SAVE' button, my form value coming as empty. What can be the reason...
1
votes
0
answer
219
Views
Error in ngrx immediately after upgrading to Angular 7
error TS2345: Argument of type '(source$: Observable) => Observable' is not assignable to parameter of type 'OperatorFunction'
Everything was working perfectly prior to the upgrade.
What's causing this error ? How can I fix it ?
1
votes
2
answer
125
Views
Moving one DIV element inside another in Angular
I am working with Jquery code in Angular where I want to move one DIV element inside another
Here is my code
.ts file
moveButton(elem) {
alert('hello' + elem);
if ( $(elem).parent().attr('id') === 'oneDiv' ) {
alert('hello' + elem);
$(elem).detach().appendTo('#anotherDiv');
} else {
$(elem).detac...
1
votes
0
answer
422
Views
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...
1
votes
1
answer
359
Views
Angular 6/7 circular dependency between libraries
I'm working on a project that's using Angular 7 and I have various angular libraries for the respective modules of the application that I build then publish on (a private) npm to be used by the application. So all angular libraries are imported in the app through their npm package.
The problem I'm f...
1
votes
0
answer
109
Views
Angular Universal + PM2: Keeps exiting and restarting
I created an Angular 7 application with Angular Universal for SSR. Testing locally, I can see the static contents rendering without any problem.
npm run build:prod && npm run server -o
However, once the file server.js and folders server and browser are deployed to the server and after starting the a...
1
votes
1
answer
22
Views
Save app icons as internal assets or provide them from a remote storage?
I am developing an Angular 7 shopping list application, PWA with CLI Schematics (@angular/pwa).
The app will provide the shopping icons grouped by item type inside accordions (around 10 to 20 per category, 2KB to 6KB each). The PWA application will be used by mobile phones only (just for context, as...