Angular TS MAT-TREE issue

Hi all, I am trying to create a mat-tree structure for my application with the below code:

<div class="container">
<div class="scrollable-tree">
<mat-tree #tree [dataSource]="dataSource" [childrenAccessor]="childrenAccessor">
<mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding (click)="selectNode(node)" [class.selected]="node.selected" [class.expanded]="node.isExpanded">
<button mat-icon-button disabled></button>
{{node.number}}
</mat-tree-node>
<mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding
[cdkTreeNodeTypeaheadLabel]="node.number" (click)="selectNode(node)" [class.selected]="node.selected" [class.expanded]="node.isExpanded">
<button mat-icon-button matTreeNodeToggle
[attr.aria-label]="'Toggle ' + node.number"
(click)="toggleNode(node)">
<mat-icon class="mat-icon-rtl-mirror">
{{tree.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
</mat-icon>
</button>
{{node.number}}
</mat-tree-node>
</mat-tree>
</div>
</div>

But my issue is I am unable to expand the tree recursively when the tree is loaded. And selections made are not throughout the row as in the below image

Anybody can help me this?