CODEWITHSUNDEEP
angulartypescript
user16712184
user16712184

Reputation:

angular call child component everytime the tab is clicked

In Component A I have a tab which renders the 2 child component but it only render once , how do we render the child component everytime the tab is clicked ? Right now it only render once and only when Component A is loaded , what I want is everytime I click the tab is refreshes and call the child component

For example if I everytime I click the Deals tab it should always render and refresh the component right now the ngOninit is only called once , how do we do that in angular ? Thank - Regards.

enter image description here

#Component A tab , I called 2 child component here which is app-transaction-overview and app-deals-transaction .

<mat-tab label="{{tab}}" *ngFor="let tab of tabs">
                        <div class="mat-tab-shadow-container">
                            <div class="mat-tab-shadow"></div>
                        </div>
                        <div class="tab-content">
                            <app-transaction-overview *ngIf="tab === 'Overview'" [transaction]="transaction"
                                (teamAndUsers)="teamAndUsersEvent($event)" #transactionOverView
                                (saveTransactionEvent)="saveTransactionEvent($event)"></app-transaction-overview>
                            <app-deals-transaction *ngIf="tab === 'Deals'" [transaction]="transaction"  [resetFormSubject]="resetFormSubject"></app-deals-transaction>
                        </div>
                    </mat-tab>

#deals child component code

import { ConfirmationDialogComponent } from 'src/app/shared/components/confirmation-dialog/confirmation-dialog.component';

@Component({
  selector: 'app-deals-transaction',
  templateUrl: './deals-transaction.component.html',
  styleUrls: ['./deals-transaction.component.css']
})
export class DealsTransactionComponent implements OnInit {
  @Input() transactionId: any = 2;
  @Input() resetFormSubject: Subject<boolean> = new Subject<boolean>();
  @Input() transactionName: string = '-';
  dealsListData: any;
  tableOptions: any; 
  @Input() transaction: any;
  constructor(
    private dialog: MatDialog,
    private route: Router) {     
  }
  
  ngOnInit(): void {
}

Upvotes: 0

Views: 1750

Answers (1)

Dorin Baba
Dorin Baba

Reputation: 1728

Add a ng-template inside your mat-tab, this way you'll always get a new instance of the component placed inside tab-container. Something like this:

<mat-tab label="{{tab}}" *ngFor="let tab of tabs">
    <ng-template matTabContent>  <===== add this
        <div class="mat-tab-shadow-container">
            <div class="mat-tab-shadow"></div>
        </div>
        <div class="tab-content">
            <app-transaction-overview *ngIf="tab === 'Overview'" [transaction]="transaction"
                (teamAndUsers)="teamAndUsersEvent($event)" #transactionOverView
                (saveTransactionEvent)="saveTransactionEvent($event)"></app-transaction-overview>
            <app-deals-transaction *ngIf="tab === 'Deals'" [transaction]="transaction"  [resetFormSubject]="resetFormSubject"></app-deals-transaction>
        </div>
    </ng-template>
</mat-tab>

Upvotes: 2

Related Questions