Skip to main content
4 de 4
adicionou 1045 caracteres ao conteúdo

Os componentes Material tem diversas interações, métodos e propriedades. no caso do MatTab não é diferente. O seletor mat-tab-group tem diversas propriedades dentre elas o selectedIndex que é responsável por indicar o index da aba que esta ativa no momento.

Abaixo segue um exemplo de como usar:

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) => {
        console.log(data);
        this.reset = 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 [reset]="reset"></app-cadastrar-recurso>
    </mat-tab>
  </mat-tab-group>
</div>

O "changeIndex" pode ser encontrado no componente de pesquisa usando o decorator @Output(). o mesmo é usado para enviar informações de um componente filho para um componente pai.

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

<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);
    }
  }

}

Para mais informações consulte a documentação do angular material e documentação oficial do angular sobre @Input() and @Output() properties.