app.component.ts
//app.component.ts
import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
selected = new FormControl(0);
reset = 0;
constructor(){}
}
ngOnInit(){
this.selected.valueChanges.subscribe({
next: (data) => {
// app console.componentlog(data);
this.htmlreset = data;
}
})
}
}
app.component.html
<div style="height: 500px;">
<mat-tab-group [selectedIndex]="selected.value"
(selectedIndexChange)="selected.setValue($event)">
<mat-tab label="Pesquisar">
<app-pesquisar-recursos (changeIndex)="selected.setValue($event)" ></app-pesquisar-recursos>
</mat-tab>
<mat-tab label="Cadastrar">
<app-cadastrar-recurso><recurso [reset]="reset"></app-cadastrar-recurso>
</mat-tab>
</mat-tab-group>
</div>
pesquisar-recursos.component.ts
// pesquisar-recursos.component.ts
import { Component, EventEmitter, OnInit, Output } from '@angular/core';
@Component({
selector: 'app-pesquisar-recursos',
templateUrl: './pesquisar-recursos.component.html',
styleUrls: ['./pesquisar-recursos.component.scss']
})
export class PesquisarRecursosComponent implements OnInit {
@Output() changeIndex = new EventEmitter();
constructor() { }
ngOnInit() {
}
public adicionarRecurso() {
this.changeIndex.emit(1);
}
}
// pesquisar-recursos.component.html
pesquisar-recursos.component.html
<div>
<h3>Pesquisar</h3>
<button mat-raised-button (click)="adicionarRecurso()"
class="example-delete-tab-button">
adicionar Recurso
</button>
</div>
Caso precise alterar algo no componente cadastro quando abrir a aba de cadastro o @Input() reset
recebe a mudança de valor e com a função ngOnChanges()
você pode ver as mudanças deste @Input
.
cadastrar-recurso.component.ts
import { Component, Input, OnInit } from '@angular/core';
@Component({
selector: 'app-cadastrar-recurso',
templateUrl: './cadastrar-recurso.component.html',
styleUrls: ['./cadastrar-recurso.component.scss']
})
export class CadastrarRecursoComponent implements OnInit {
@Input() reset = 0;
constructor() { }
ngOnInit() {
}
ngOnChanges(){
console.log('teste ' + this.reset);
if(this.reset == 1){
console.log('teste ' + this.reset);
}
}
}