Develop Reference

Cannot display Angular dialog properly

I am trying to make a dialog box in Angular, but the dialog is not been displayed in the centre, only as a vertical white rectangle to the left.
I will include an image depicting the exact problem: screenshot of the page.
I have included entry components in my appmodule.ts file
There are no errors while compiling it.
Header component.ts file :
import { Component, OnInit } from '#angular/core';
import { MatDialog, MatDialogRef } from '#angular/material';
import { LoginComponent } from '../login/login.component';
#Component({
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements OnInit {
constructor(public dialog: MatDialog ) { }
ngOnInit() {
}
openLoginForm() {
this.dialog.open(LoginComponent, {width: '500px', height: '450px'});
}
}

add LoginComponent in entrycomponents array in module.
like this.
entryComponents: [LoginComponent]

How to open modal window using angular4 and load component content?

I have imported ngbModal module fron ng2bootstrap now i am trying to open modal window and load the current component content into modal body. what is the correct approach to implement ?
search.components.ts
import { Component, OnInit,Pipe, PipeTransform, EventEmitter,Input, Output,OnChanges, SimpleChanges } from '#angular/core';
import {GtConfig} from '#angular-generic-table/core';
import {NgbModal} from '#ng-bootstrap/ng-bootstrap';
import * as io from 'socket.io-client';
#Component({
selector: 'app-detail',
templateUrl: './detail.component.html',
styleUrls: ['./detail.component.css'],
})
export class DetailComponent implements OnChanges{
constructor(private detailService: DetailService,private ngbModal: NgbModal) {};
ngOnInit(){
this.secondConfigObject = {
settings: this.getBaseSettings(),
fields: this.getBaseFields(),
data: []
};
})
}
rowData(event) {
console.log('Event',event);
this.detailService.changeChart(event);
}
execModal(evt){
const modalReg = this.ngbModal.open(Component);
}
}

angular 2 service injection issue

My project structure:
app.component.ts:
import { Component } from "#angular/core"
import { Todo } from './components/shared/todo.model'
import { todos } from "./components/shared/todo.data"
import {TodoService} from "./components/shared/todoService"
import {TodoService} from "./components/shared/todoService";
#Component({
moduleId: module.id,
selector: "app",
templateUrl: "app.component.html",
styleUrls: ['app.component.css'],
providers: [TodoService]
})
export class AppComponent {
title:string = "Angular 2Do";
}
todo-form.component.ts:
import {Component, Output, EventEmitter} from "#angular/core";
import {Todo} from "../shared/todo.model";
import {TodoService} from "../shared/todoService"
#Component({
moduleId: module.id,
selector: "todo-form",
templateUrl: "todo-form.component.html",
styleUrls: ["todo-form.component.css"],
})
export class TodoForm {
...
constructor(private todoService:TodoService) {
console.log(this.todoService);
this.todoService.order = 2;
console.log( this.todoService);
}
}
todo-list.component.ts:
import {Component, Input, OnInit} from "#angular/core"
import { ITodo } from "../shared/todo.model"
import { TodoService } from "../shared/todoService"
#Component({
moduleId: module.id,
selector: "todo-list",
templateUrl: "todo-list.component.html",
styleUrls: ["todo-list.component.css"],
})
export class TodoListComponent implements OnInit {
todos:ITodo[];
...
constructor(private todoService:TodoService) {
...
console.log(this.todoService);
this.todoService.order=1;
console.log(this.todoService);
}
...
}
app is the parent of the list and form components
Whaen I start application I see in console:
but if expand all I see:
Which result actual and why in second view I see 1 and in another 2.

The console.log '+' button can only show you the current state of the object, not the object at the snapshot in time of when it was called.
See console.log() async or sync? for a more in depth explanation.
So order: 1, is the final state of the object.

never use providers( providers: [TodoService] ) in component
as
import { Component } from "#angular/core"
import { Todo } from './components/shared/todo.model'
import { todos } from "./components/shared/todo.data"
import {TodoService} from "./components/shared/todoService"
import {TodoService} from "./components/shared/todoService";
#Component({
moduleId: module.id,
selector: "app",
templateUrl: "app.component.html",
styleUrls: ['app.component.css']
})
export class AppComponent {
title:string = "Angular 2Do";
}
it makes new instance when component initialise so put providers in module only ie. NgModule

Angular 2 redirect on click

How to create simple redirect on click on some button in Angular 2? Already tried:
import {Component, OnInit} from 'angular2/core';
import {Router, ROUTER_PROVIDERS} from 'angular2/router'
#Component({
selector: 'loginForm',
templateUrl: 'login.html',
providers: [ROUTER_PROVIDERS]
})
export class LoginComponent implements OnInit {
constructor(private router: Router) { }
ngOnInit() {
this.router.navigate(['./SomewhereElse']);
}
}

You could leverage the event support of Angular2:
import {Router} from '#angular/router';
#Component({
selector: 'loginForm',
template: `
<div (click)="redirect()">Redirect</div>
`,
providers: [ROUTER_PROVIDERS]
})
export class LoginComponent implements OnInit {
constructor(private router: Router) { }
redirect() {
this.router.navigate(['./SomewhereElse']);
}
}

I would make it more dynamic using method parameters
Import the angular router
import { Router } from '#angular/router';
Create a button with click event
<div (click)="redirect(my-page)">My page</div>
Create a method with a pagename parameter
redirect(pagename: string) {
this.router.navigate(['/'+pagename]);
}
When clicked the router should route to the correct page

I'd say use routerLink directive & placed that over a(anchor) tag
<a [routerLink]="['./SomewhereElse']">Redirect</a>
Also you need to remove ROUTER_PROVIDERS from providers & include it in bootstrap dependency and then add ROUTER_DIRECTIVES in directives option of component to use routerLink directive on HTML. Make sure RouterModule with its route has been injected in Main App module.

Try routerLinkon button tag
<button type="button" [routerLink]="['/edit']">Edit</button>
More Info

in your html file right this code.
<button (click)="btnClick()">Cancel</button>
in your component.ts file right this code.
constructor(private router:Router) { }
btnClick(){
this.router.navigateByUrl("/payment");
}

window.location.reload();
does the trick

In Ionic 2, how do I create a custom directive that uses Ionic components?

Creating a basic directive is simple:
import {Component} from 'angular2/core';
#Component({
selector: 'my-component',
template: '<div>Hello!</div>'
})
export class MyComponent {
constructor() {
}
}
This works as expected. However, if I want to use Ionic components in my directive things blow up.
import {Component} from 'angular2/core';
#Component({
selector: 'my-component',
template: '<ion-list><ion-item>I am an item</ion-item></ion-list>'
})
export class MyComponent {
constructor() {
}
}
The directive is rendered, but Ionic components are not transformed, and so wont look/work properly.
I can't find any examples on this. How should I do this?

Found the answer here:
You have to import the Ionic components and register them as
'directives'
So my second example becomes:
import {Component} from 'angular2/core';
import {List, Item} from 'ionic/ionic';
#Component({
selector: 'my-component',
directives: [List, Item],
template: '<ion-list><ion-item>I am an item</ion-item></ion-list>'
})
export class MyComponent {
constructor() {
}
}