Skip to main content
adicionou 1045 caracteres ao conteúdo
Fonte Link

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

}
//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)
  constructor(){}
 
}



// 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></app-cadastrar-recurso>
    </mat-tab>
  </mat-tab-group>
</div>
// 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>

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>

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

}
adicionou 24 caracteres ao conteúdo
Fonte Link

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)
  constructor(){}

}



// 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></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>

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

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)
  constructor(){}

}



// 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></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>

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

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)
  constructor(){}

}



// 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></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>

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

adicionou 822 caracteres ao conteúdo
Fonte Link

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

//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 {
  tabs = ['First', 'Second', 'Third'];
  selected: number = 0;
new FormControl(0)
  constructor(){}

} 



// app.component.html public next(){
<div style="height: 500px;">
  <mat-tab-group if(this[selectedIndex]="selected.selectedvalue" < 
 2   (selectedIndexChange){="selected.setValue($event)">
    <mat-tab label="Pesquisar">
 this.selected ++;
    }<app-pesquisar-recursos else(changeIndex)="selected.setValue($event)" {></app-pesquisar-recursos>
    </mat-tab>
  this.selected = 0;<mat-tab label="Cadastrar">
    }
  }
}<app-cadastrar-recurso></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.

// apppesquisar-recursos.component.htmlts
import { 
<divComponent, style="height:EventEmitter, 500px;">OnInit, Output } from '@angular/core';

@Component({
  <matselector: 'app-tabpesquisar-group [selectedIndex]="selected">recursos',
  templateUrl: './pesquisar-recursos.component.html',
 <mat styleUrls: ['./pesquisar-tabrecursos.component.scss']
})
export *ngFor="letclass tabPesquisarRecursosComponent ofimplements tabs;OnInit let{
 index @Output() changeIndex = index"new [label]="tab">EventEmitter();
   constructor() { }

 Contents forngOnInit() {{tab}
  } 

 tab public adicionarRecurso() {
    this.changeIndex.emit(1);
  }
}

// pesquisar-recursos.component.html
<div>
  <h3>Pesquisar</h3>
  <button mat-raised-button (click)="next="adicionarRecurso()"
              class="example-delete-tab-button">
       adicionar proximoRecurso
      </button>
    </mat-tab>
  </mat-tab-group>
</div>

basicamente a variável selected contem o index da aba atual e a função next() modifica o valor dessa variável.

ps: O exemplo acima é bem simples, ainda precisa ser ajustado para a sua demanda.

ps2: paraPara mais informações consulte a documentação do angular material e documentação oficial do angular sobre @Output().

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

//app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  tabs = ['First', 'Second', 'Third'];
  selected: number = 0;

  constructor(){}

  public next(){
    if(this.selected < 2){
      this.selected ++;
    } else {
      this.selected = 0;
    }
  }
}



// app.component.html  
<div style="height: 500px;">
  <mat-tab-group [selectedIndex]="selected">
    <mat-tab *ngFor="let tab of tabs; let index = index" [label]="tab">
      Contents for {{tab}} tab
  
      <button mat-raised-button (click)="next()"
              class="example-delete-tab-button">
        proximo
      </button>
    </mat-tab>
  </mat-tab-group>
</div>

basicamente a variável selected contem o index da aba atual e a função next() modifica o valor dessa variável.

ps: O exemplo acima é bem simples, ainda precisa ser ajustado para a sua demanda.

ps2: para mais informações consulte a documentação do angular material.

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.

//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)
  constructor(){}

} 



// 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></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>

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

Fonte Link
Carregando