If you want to perform a hover like event on any HTML element, then you can do it like this. HTML <div (mouseenter) =”mouseEnter(‘div a’) ” (mouseleave) =”mouseLeave(‘div A’)”> <h2>Div A</h2> </div> <div (mouseenter) =”mouseEnter(‘div b’)” (mouseleave) =”mouseLeave(‘div B’)”> <h2>Div B</h2> </div> Component import { Component } from ‘@angular/core’; @Component({ moduleId: module.id, selector: ‘basic-detail’, templateUrl: … Read more
To create a component as part of a module you should ng g module newModule to generate a module, cd newModule to change directory into the newModule folder ng g component newComponent to create a component as a child of the module. UPDATE: Angular 9 Now it doesn’t matter what folder you are in when … Read more
Interfaces are only at compile time. This allows only you to check that the expected data received follows a particular structure. For this you can cast your content to this interface: this.http.get(‘…’) .map(res => <Product[]>res.json()); See these questions: How do I cast a JSON object to a typescript class How to get Date object from … Read more
Using a cell renderer. Use the renderer name of your choice when configuring the column: const container = document.getElementById(‘container’); const hot = new Handsontable(container, { data: someData, columns: [{ renderer: ‘numeric’ }] });
Angular 9.0.0 < Since 9.0.0 with Ivy, the entryComponents property is no longer necessary. See deprecations guide. Angular 9.0.0 > You need to add dynamically created components to entryComponents inside your @NgModule @NgModule({ declarations: [ AppComponent, LoginComponent, DashboardComponent, HomeComponent, DialogResultExampleDialog ], entryComponents: [DialogResultExampleDialog] Note: In some cases entryComponents under lazy loaded modules will not work, … Read more
First, what you need to understand the relationships between components. Then you can choose the right method of communication. I will try to explain all the methods that I know and use in my practice for communication between components. What kinds of relationships between components can there be? 1. Parent > Child Sharing Data via … Read more
Create a function in the controller that redirects to the expected route like so redirectTo(uri:string){ this.router.navigateByUrl(“https://stackoverflow.com/”, {skipLocationChange: true}).then(()=> this.router.navigate([uri])); } then use it like this this.redirectTo(‘//place your uri here’); this function will redirect to a dummy route and quickly return to the destination route without the user realizing it.
A quick tip that helps me remember what they do – HostBinding(‘value’) myValue; is exactly the same as [value]=”myValue” And HostListener(‘click’) myClick(){ } is exactly the same as (click)=”myClick()” HostBinding and HostListener are written in directives and the other ones (…) and [..] are written inside templates (of components).
With pure JavaScript: console.log(window.location.href) Using Angular: this.router.url import { Component } from ‘@angular/core’; import { Router } from ‘@angular/router’; @Component({ template: ‘The href is: {{href}}’ /* Other component settings */ }) export class Component { public href: string = “”; constructor(private router: Router) {} ngOnInit() { this.href = this.router.url; console.log(this.router.url); } } The plunkr is … Read more
You can define multiple routes with and without parameter: @RouteConfig([ { path: ‘/user/:id’, component: User, name: ‘User’ }, { path: ‘/user’, component: User, name: ‘Usernew’ } ]) and handle the optional parameter in your component: constructor(params: RouteParams) { var paramId = params.get(“id”); if (paramId) { … } } See also the related github issue: https://github.com/angular/angular/issues/3525