I’ll answer your question using Shadow DOM and Light DOM terminology (it have come from web components, see more here). In general: Shadow DOM – is an internal DOM of your component that is defined by you (as a creator of the component) and hidden from an end-user. For example: @Component({ selector: ‘some-component’, template: ` … Read more
Within your component, you can define an array of number (ES6) as described below: export class SampleComponent { constructor() { this.numbers = Array(5).fill().map((x,i)=>i); // [0,1,2,3,4] this.numbers = Array(5).fill(4); // [4,4,4,4,4] } } See this link for the array creation: Tersest way to create an array of integers from 1..20 in JavaScript. You can then iterate … Read more
event.target here is an HTMLElement which is the parent of all HTML elements, but isn’t guaranteed to have the property value. TypeScript detects this and throws the error. Cast event.target to the appropriate HTML element to ensure it is HTMLInputElement which does have a value property: (event.target as HTMLInputElement).value Per the documentation: Type the $event … Read more
No! There is no command which will change the name of all files generated using the component create command. So created ts, html, css/scss, .spec.ts files need to be manually renamed/edited. I am a frequent user of angular cli and I think this would be a nice-to-have command as some time we just create angular … Read more
Lifecycle hooks, like OnInit() work with Directives and Components. They do not work with other types, like a service in your case. From docs: A Component has a lifecycle managed by Angular itself. Angular creates it, renders it, creates and renders its children, checks it when its data-bound properties change and destroy it before removing … Read more
You need to import the map operator: import ‘rxjs/add/operator/map’ Or more generally: import ‘rxjs/Rx’; Notice: For versions of RxJS 6.x.x and above, you will have to use pipeable operators as shown in the code snippet below: import { map } from ‘rxjs/operators’; import { HttpClient } from ‘@angular/common/http’; // … export class MyComponent { constructor(private … Read more
This is what I used to kill the progress on port 4200 For linux users: sudo kill $(sudo lsof -t -i:4200) You could also try this: sudo kill `sudo lsof -t -i:4200` For windows users: Port number 4200 is already in use. Open the cmd as administrator. Type below command in cmd: netstat -a -n … Read more
You can use this-> window.location.href=”https://stackoverflow.com/questions/34338440/…”; This would change the page to whatever you want..
Like Tuấn Nguyễn described, you need to: Go to the Command Palette by pressing Ctrl + Shift + P, In the input that pops up at the top of the Visual Studio Code, start typing TSLint: Manage workspace library execution” and hit the Enter key. From the menu that replaces the input, pick enable workspace … Read more
In your particular example you’d do the following routerLink: [routerLink]=”[‘user’, user.id, ‘details’]” To do so in a controller, you can inject Router and use: router.navigate([‘user’, user.id, ‘details’]); More info in the Angular docs Link Parameters Array section of Routing & Navigation