After creating an HTML file using Angular Material, I noticed that the components' CSS files are not being applied properly.
This is a snippet from my HTML file:
<div class="content-container">
<div class="tree-container">
<mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
<mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding class="tree-node">
<button *ngIf="node.isAction" mat-button (click)="openForm(node.name, node.parentName)">{{node.name}}</button>
</mat-tree-node>
<mat-tree-node *matTreeNodeDef="let node; when: hasChild" matTreeNodePadding>
<button mat-icon-button matTreeNodeToggle>
<mat-icon>
{{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
</mat-icon>
</button>
{{node.name}}
<button *ngIf="node.isAction" mat-button (click)="openForm(node.name, node.parentName)">{{node.name}}</button>
</mat-tree-node>
</mat-tree>
</div>
<div class="form-container" *ngIf="isFormVisible">
<ng-container *ngComponentOutlet="selectedFormComponent"></ng-container>
</div>
Here's a portion of my CSS file:
.mat-tree-node {
display: flex;
align-items: center;
flex: 1;
word-wrap: break-word;
min-height: var(--mat-tree-node-min-height);
transition: background-color 0.3s ease;
cursor: pointer; }
.tree-container {
flex: 1;
max-width: 50%;
padding: 20px;
background-color: #f0f0f0;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
overflow: hidden; }
I have tried different solutions like setting encapsulation to ViewEncapsulation.None and testing on different browsers, but none of them seem to work. Can someone offer some assistance?