3

Estou iniciando em Angular e tenho ainda dúvidas em relação a interação entre componentes. No meu caso em específico não sei como fazer, e se tem como.

        <mat-tab-group>
            <mat-tab label="Pesquisa">
                <app-recursos-pesquisa></app-recursos-pesquisa>
            </mat-tab>

            <mat-tab label="Cadastro">
                <app-recursos-cadastro></app-recursos-cadastro>
            </mat-tab>
        </mat-tab-group>

Dentro do componente app-recursos-pesquisa tenho um botão 'Novo cadastro'. O que quero fazer é, quando clicar nele, a mat-tab Cadastro seja acionada, direcionando assim para essa tab.

Este é o botão que será acionado

Esta é a tab que desejo que seja aberta ao clicar no botão

1 Resposta 1

2

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.

7
  • 1
    Certo. é possível sim. vou modificar minha resposta.
    – Eustáquio
    Commented 22/08/2022 às 18:41
  • 1
    Na documentação sobre o @output também contem conteúdo sobre @Input. Basicamente ele é usado para fazer o inverso do @output transitando conteúdo do componente pai para um componente filho. Usando uma função ngOnChanges no componente <app-recursos-cadastro> poderá obter as mudanças que o @Input teve.
    – Eustáquio
    Commented 22/08/2022 às 20:44
  • 1
    Entendi, vou ler sobre isso. Muito obrigada pela ajuda
    – HuntressDC
    Commented 22/08/2022 às 20:50
  • 1
    Olá Eustáquio, será que seria possível me ajudar novamente nessa parte?
    – HuntressDC
    Commented 25/08/2022 às 13:46
  • 1
    Fiz algumas edições com um exemplo de como usar o @Input().
    – Eustáquio
    Commented 25/08/2022 às 17:05

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .