Property tabPanel is not provided by any applicable directives nor by <mat-tab> element?

so i have an angular Projet but it doesn't work because of TabPanel problem . Help me Please codes :

<div class="page-container">
<header>
<h1>Test Page</h1>
</header>

<div class="main-layout">
<nav>
<app-navbar></app-navbar>
</nav>
<main>
<h2>Test</h2>
<app-breadcrumb></app-breadcrumb>

<h3>Sections</h3>

<mat-tab-group>
<mat-tab label="Formulaire" [tabPanel]="formPanel">
<ng-template matTabContent>
<form (ngSubmit)="onSubmit(testForm)" #testForm="ngForm">
<mat-form-field appearance="fill" class="full-width">
<mat-label>Input Text (mandatory)</mat-label>
<input matInput id="inputText" name="inputText" ngModel required>
<mat-error *ngIf="isControlInvalid(testForm.controls['inputText'])">Input text is required.</mat-error>
</mat-form-field>

<mat-form-field appearance="fill" class="full-width">
<mat-label>Date (DD/MM/YYYY)</mat-label>
<input matInput type="text" id="date" name="date" ngModel placeholder="DD/MM/YYYY" required>
<mat-error *ngIf="isControlInvalid(testForm.controls['date'])">Valid date is required.</mat-error>
</mat-form-field>

<mat-form-field appearance="fill" class="full-width">
<mat-label>Email (mandatory)</mat-label>
<input matInput id="email" name="email" ngModel required>
<mat-error *ngIf="isControlInvalid(testForm.controls['email'])">Valid email is required.</mat-error>
</mat-form-field>

<mat-form-field appearance="fill" class="full-width">
<mat-label>Phone Number</mat-label>
<input matInput type="tel" id="phone" name="phone" ngModel>
</mat-form-field>

<div class="button-group">
<button mat-raised-button color="primary" type="submit" [disabled]="testForm.invalid">Submit</button>
<button mat-button type="button" (click)="resetForm(testForm)">Reset</button>
</div>
</form>
</ng-template>
</mat-tab>

<mat-tab label="Tableau" [tabPanel]="tablePanel">
<ng-template matTabContent>
<h3>Table Section</h3>
<app-table [data]="tableData"></app-table>
</ng-template>
</mat-tab>

<mat-tab label="Graphiques" [tabPanel]="chartPanel">
<ng-template matTabContent>
<h3>Chart Section</h3>
<app-chart [data]="chartData"></app-chart>
</ng-template>
</mat-tab>
</mat-tab-group>
</main>
</div>
</div>


Property tabPanel is not provided by any applicable directives nor by element

the component code :

import { Component } from '@angular/core';
import {FormsModule, NgForm} from '@angular/forms';
import {NavbarComponent} from "./navbar/navbar.component";
import {BreadcrumbComponent} from "./breadcrumb/breadcrumb.component";
import {MatError, MatFormField, MatLabel} from "@angular/material/select";
import {NgIf} from "@angular/common";
import {TableComponent} from "./table/table.component";
import {ChartComponent} from "./chart/chart.component";
import {MatInput} from "@angular/material/input";
import {MatButton} from "@angular/material/button";
import {MatTab, MatTabContent, MatTabGroup} from "@angular/material/tabs";



@Component({
selector: 'app-test-page',
templateUrl: './test-page.component.html',
imports: [
NavbarComponent,
BreadcrumbComponent,
FormsModule,
MatFormField,
MatLabel,
MatFormField,
MatFormField,
MatFormField,
MatError,
MatFormField,
MatLabel,
MatError,
MatFormField,
NgIf,
TableComponent,
ChartComponent,
MatButton,
MatInput,
MatTabGroup,
MatTab,
MatTabContent,


],
styleUrls: ['./test-page.component.scss']
})
export class TestPageComponent {
// Variables pour les panels
formPanel: any;
tablePanel: any;
chartPanel: any;

tableData = [
{ col1: "Test Data 1A", col2: "Test Data 1B", actions: ['View', 'Delete'] },
{ col1: "Test Data 2A", col2: "Test Data 2B", actions: ['View', 'Delete'] },
];

chartData = {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'Sales',
data: [65, 59, 80, 81, 56, 55, 40],
fill: false,
borderColor: 'rgba(75, 192, 192, 1)',
tension: 0.1,
},
{
label: 'Expenses',
data: [28, 48, 40, 19, 86, 27, 90],
fill: false,
borderColor: 'rgba(255, 99, 132, 1)',
tension: 0.1,
},
],
};

onSubmit(testForm: NgForm) {
if (testForm.valid) {
console.log("Form Submitted:", testForm.value);
} else {
console.error("Form is invalid", testForm);
}
}

resetForm(form: NgForm) {
form.resetForm();
}

isControlInvalid(control: any): boolean {
return control?.invalid && (control?.touched || control?.pristine);
}
}


the module code :

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { MatButtonModule } from '@angular/material/button';
import { MatInputModule } from '@angular/material/input';
import { MatSelectModule } from '@angular/material/select';
import { MatTableModule } from '@angular/material/table';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { DateAdapter, MatNativeDateModule, NativeDateAdapter } from '@angular/material/core';
import { MatFormFieldModule } from '@angular/material/form-field';
import { TestPageComponent } from './test-page.component';
import { NavbarComponent } from './navbar/navbar.component';
import { BreadcrumbComponent } from './breadcrumb/breadcrumb.component';
import { ChartComponent } from './chart/chart.component';
import { TableComponent } from './table/table.component';

@NgModule({
declarations: [

],
imports: [
CommonModule,
FormsModule,
RouterModule,
MatButtonModule,
MatInputModule,
MatSelectModule,
MatTableModule,
MatDatepickerModule,
MatNativeDateModule,
MatFormFieldModule,
TestPageComponent,
NavbarComponent,
TableComponent,
BreadcrumbComponent,
ChartComponent,
],
providers: [
{ provide: DateAdapter, useClass: NativeDateAdapter },
],
exports: [
TestPageComponent
],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class TestPageModule {}


so these are my codes , please find a solution with me . Thank you and have a nice day guys

Continue reading...