I am trying to refresh a component (in html via ) that includes mat-cards after changing the value of a mat radio button group. Somehow I cant get the change-event and the following redirection to work:
app.component.html:
<mat-radio-group
aria-labelledby="example-radio-group-label"
class="example-radio-group"
[(ngModel)]="Sprache"
(change)="radioChange($event)">
<mat-radio-button class="example-radio-button" *ngFor="let season of sprachen" [value]="season">
{{season}}
</mat-radio-button>
</mat-radio-group>
app.component.ts:
import { Component} from '#angular/core';
import { Router } from '#angular/router';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Juliens MEAN-Pokedex';
showFiller = false;
Sprache: string;
sprachen: string[] = ['de', 'en', 'fr', 'ja', 'kr', 'zh'];
constructor(private router: Router){
}
radioChange(e){
this.router.navigateByUrl('/', {skipLocationChange: true}).then(()=>
this.router.navigate(['Dashboard']));
}
}
Related
I have 2 components , one login and other home. When I change drop down into login component ,selected value need to display in home component. I am already emitting the onchange event from login component to home component and displaying the value but still I am not getting the value into home component.Here is the code below
login.component.html
<select #mySelect (change)="onOptionsSelected(mySelect.value)">
<option value="one">one</option>
<option value="two">two</option>
</select>
login.component.ts
import { Component, OnInit,Input,Output, EventEmitter } from '#angular/core';
import { Router } from '#angular/router';
#Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
#Output() buttonClicked = new EventEmitter();
constructor(private router: Router) { }
#Input() item: string;
ngOnInit() {
}
onOptionsSelected(value:string){
console.log("the selected value is " + value);
this.buttonClicked.emit(value);
this.router.navigateByUrl('/home');
}
}
home.component.html
<p>home works!</p>
<app-login (buttonClicked)='showNextComponent($event)'></app-login>
<p>Hello {{ name }} </p>
home.component.ts
import { Component, OnInit,ElementRef,ViewChild } from '#angular/core';
import { CommonserviceService } from './../utilities/services/commonservice.service';
import { LoginComponent } from '../login/login.component';
#Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
getListData: any;
constructor(private commonserviceService: CommonserviceService) { }
name:string
ngOnInit() {
}
showNextComponent(value:string) {
this.name = value;
console.log(this.name);
}
}
I pasted your code here in stackblitz: https://stackblitz.com/edit/angular-cfkqns
You are correctly emitted values up to the parent component and binding the value to be displayed in the parent component.
It is working how you expect it to :-)
UPDATE:
I have answered the same question for some one else here:
https://stackoverflow.com/a/64082745/450388
however I have updated your stackblitz to reflect how to achieve the same.
https://stackblitz.com/edit/angular-cfkqns
Hi I am facing an issue with reactive form control usage. For mat-select I have a default JSON array with name and id. Of which I am showing only name in the drop down. I want to set a name as default using similar JSON but I am not able to do that. Kindly suggest:
import { Component, OnInit } from '#angular/core';
import { FormGroup, FormBuilder } from '#angular/forms';
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
form: FormGroup
data: any
constructor(
private formBuilder: FormBuilder
) {}
ngOnInit() {
this.stateList = [{
name: 'def',
id: '1'
}, {
name: 'ghi',
id: '2'
}];
this.form = this.formBuilder.group({
state: {
name: 'abc',
id: '1'
}
})
}
}
<form [formGroup]="form">
<mat-form-field>
<mat-label>Color</mat-label>
<mat-select [(value)]="state.name" formControlName="state">
<mat-option *ngFor="let state of stateList" [value]="state">
{{ state.name }}</mat-option>
</mat-select>
</mat-form-field>
</form>
I have 2 dropdowns, I need to just get the selected value of those dropdown on click a save button in angular 6 or typescript.I know in jquery but here I am new to angular 6,can any one please help me.Here is the code below
app.component.html
<select class="select1">
<option>country1</option>
<option>country2</option>
<option>country3</option>
</select>
<select class="select2">
<option>state1</option>
<option>state2</option>
<option>state3</option>
</select>
<button (click)="save()">save</button>
app.component.ts
declare var require: any;
import { Component,OnInit, Output, EventEmitter } from '#angular/core';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
toggle:boolean = true;
click : any;
selectOneVal : any;
selectTwoVal : any;
ngOnInit(){
}
save(){
console.log(this.selectOneVal);
console.log(this.selectTwoVal)
}
}
I think you need to read about forms in Angular here
app.component.html
<div style="text-align:center">
<select class="select1" [(ngModel)]="selectOneVal">
<option value="country1">country1</option>
<option value="country2">country2</option>
<option value="country3">country3</option>
</select>
<select class="select2" [(ngModel)]="selectTwoVal">
<option value="state1">state1</option>
<option value="state2">state2</option>
<option value="state3">state3</option>
</select>
<button (click)="save()">save</button>
</div>
<small>
selectOneVal: {{ selectOneVal}}
</small>
<br/>
<small>
selectTwoVal: {{ selectTwoVal}}
</small>
app.component.ts
import { Component } from "#angular/core";
#Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent {
title = "CodeSandbox";
toggle: boolean = true;
click: any;
selectOneVal: any;
selectTwoVal: any;
ngOnInit() {
this.selectOneVal = "country1";
this.selectTwoVal = "state1";
}
save() {
console.log(this.selectOneVal);
console.log(this.selectTwoVal);
}
}
app.module.ts
import { BrowserModule } from "#angular/platform-browser";
import { NgModule } from "#angular/core";
import { AppComponent } from "./app.component";
import { FormsModule } from "#angular/forms";
#NgModule({
declarations: [AppComponent],
imports: [BrowserModule, FormsModule],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
here is the working answer on codesandbox
I am trying to create a div and then add a component into that div during runtime. I was wondering how i could do this.
this is my components html:
<p>
<label >name</label>
</p>
this is my components ts :
import { Component, OnInit} from '#angular/core';
#Component({
selector: 'app-newcomp',
templateUrl: './newcomp.component.html',
styleUrls: ['./newcomp.component.css']
})
export class NewcompComponent implements OnInit {
name: string;
constructor() {
}
ngOnInit() {
}
}
This is where it will be called
import { Component } from '#angular/core';
import { NewcompComponent } from './newcomp/newcomp.component';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';
constructor() {
this.Newcomp();
}
Newcomp() {
const div = document.createElement('div');
document.body.appendChild(div);
<-- this is where the component is added to the div, how can i achieve this.
}
}
If someone could help me it would be greatly appreciated. :)
Also i know this example is simple, but keeping it simple will allow for clarity in the answer.
import { Component } from '#angular/core';
import { NewcompComponent } from './newcomp/newcomp.component';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';
component: Type<any>;
constructor() {
this.component = this.newcomp();
}
private newcomp() {
// use this method for logic
return NewcompComponent;
}
}
In app.component.html add:
<ng-container *ngComponentOutlet="component"></ng-container>
For more info Angular's component outlet info & Angular's dynamic component creation
I'm trying to redirect to another page(Page-II) when a button clicked but unfortunately that another page component loads on the same page(Page-I). Here what I tried so far :
app.component.html
<button (click)="register()"
mat-raised-button class="searchButton" type="button">Register</button>
<button (click)="profile()"
mat-raised-button class="searchButton" type="button">Profile</button>
<router-outlet></router-outlet>
app-routing.module.ts
const routes: Routes = [{
path : 'register',
component : RegisterComponent
},
{
path : 'profile',
component : ProfileComponent
}];
#NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
app.component.ts
import { Component , OnInit } from '#angular/core';
import { Router } from '#angular/router';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
title = 'app';
constructor(private router: Router ) {}
register = function () {
location.pathname = ('/register');
};
profile = function(){
this.router.navigateByUrl('/profile');
};
ngOnInit() {
}
}
Note: I know that profile loads on same page but trying to redirect register.html when register button clicks on another page.
Can you try this:
register() {
this.router.navigate(['/register']);
}