How to use the @angular/material.MatTreeFlattener function in @angular/material

app: App
    menus: Array = []
    private transformer = (node: ExtendedMenu, level: number) => {
        return {
            expandable: !!node.subMenus && node.subMenus.length > 0,
            name: node.displayName,
            level,
            id: node.id,
            extMenu: node
        };
    }

    treeControl = new FlatTreeControl(
        node => node.level, node => node.expandable);
    treeFlattener = new MatTreeFlattener(
        this.transformer, node => node.level, node => node.expandable, (node: ExtendedMenu) => node.subMenus);

    dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);
    hasChild = (_: number, node: MenuNode) => node.expandable || node.level === 0;

    ngOnInit(): void {
        this.pageService.init('menus').subscribe()
        this.app = this.activetedRouter.snapshot.data.app
        this.menus = this.app.menus as ExtendedMenu[]
        this.dataSource.data = this.menus
    }

    ngAfterViewInit(): void {
        // Ensure we have nested node with more than 1
        if(this.menus.some(a => ObjectUtils.isNotNull(a.subMenus) && a.subMenus.length > 0)){
            this.tree.treeControl.expandAll()

name: node.displayName,
            level,
            id: node.id,
            extMenu: node,
            checked: isChecked
        }
        if(isChecked){
            this.checklistSelection.select(menuNode)
        }

        return menuNode;
    }

    treeControl = new FlatTreeControl(
        node => node.level, node => node.expandable);
    treeFlattener = new MatTreeFlattener(
        this.transformer, node => node.level, node => node.expandable, (node: ExtendedMenu) => node.subMenus);

    dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);

    checklistSelection = new SelectionModel(true)
    menuProfile: MenuProfile

    
    hasChild = (_: number, node: MenuNode) => node.expandable || node.level === 0;

    ngOnInit(): void {
    }

    onRoleChange() {
        // Refill the claim list based on role
        this.menuProfile = _.find(this.app.menuProfiles, profile => profile.role === this.selectedRole)

id: node.name,
            name: node.displayName,
            checked: false,
            level,
            expandable: !!node.subClaims && node.subClaims.length > 0,
            parentId: node.parentId
        }

        return claimNode;
    }

    selectedRolePortalClaims: RolePortalClaimModel[] = []
    selectedClaims: SelectablePortalClaim[] = []
    treeSelectedControl = new FlatTreeControl(
        node => node.level, node => node.expandable);
    treeSelectedFlattener = new MatTreeFlattener(
        this.transformerSelectedClaim, node => node.level, node => node.expandable, (node: SelectablePortalClaim) => node.subClaims);

    dataSourceSelectedClaims = new MatTreeFlatDataSource(this.treeSelectedControl, this.treeSelectedFlattener);
    
    hasChild = (_: number, node: ClaimNode) => node.expandable || node.level === 0;    

    ngOnInit(): void {
        this.pageService.init('role-claims').subscribe()
        this.activatedRoute.paramMap.subscribe(params => {
            this.selectedRole = params.get('roleName')
        })
        this.selectedRolePortalClaims = this.activatedRoute.snapshot.data.roleClaims

        this.logger.debug('selected claims', this.selectedRolePortalClaims)
        combineLatest(this.pagesClient.getAllPortalClaims(), this.appClient.getAllApps(), (v1, v2) => ({ v1, v2 })).subscribe(
            pair => {

constructor(storageService: StorageService,
    public iconService: IconService,
    public state: PlayerStateService,
    public location: Location,
    private route: ActivatedRoute) {
    super(storageService);
    this.collectionTreeControl = new FlatTreeControl(this._getLevel, this._isExpandable);
    this.treeFlattener2 = new MatTreeFlattener(this.transformer2, this._getLevel, this._isExpandable, this._getChildren);
  }
  ngOnInit() {

}
        if (!!this.selectedRolePortalClaims && this.selectedRolePortalClaims.length > 0 && level > 0) {
            const found = _.find(this.selectedRolePortalClaims, claim => claim.name === node.parentId)
            if (!!found) {
                claimNode.checked = found.claims.indexOf(claimNode.id) > -1
                if (claimNode.checked) {
                    this.checklistSelection.select(claimNode)
                }
            }
        }

        return claimNode;
    }
    treeControl = new FlatTreeControl(
        node => node.level, node => node.expandable);
    treeFlattener = new MatTreeFlattener(
        this.transformer, node => node.level, node => node.expandable, (node: SelectablePortalClaim) => node.subClaims);

    dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);

    allPortalClaims: SelectablePortalClaim[] = []
    checklistSelection = new SelectionModel(true)

    private transformerSelectedClaim = (node: SelectablePortalClaim, level: number) => {
        const claimNode: ClaimNode = {
            id: node.name,
            name: node.displayName,
            checked: false,
            level,
            expandable: !!node.subClaims && node.subClaims.length > 0,
            parentId: node.parentId
        }

constructor(database: ConfigDb) {
    this.treeFlattener = new MatTreeFlattener(this.transformer, this._getLevel,
        this._isExpandable, this._getChildren);
    this.configTreeControl = new FlatTreeControl(this._getLevel, this._isExpandable);
    this.configDataSource = new MatTreeFlatDataSource(this.configTreeControl, this.treeFlattener);

    database.dataChange.subscribe(data => this.configDataSource.data = data);
  }

constructor(
    storageService: StorageService,
    private ref: ChangeDetectorRef) {
    super(storageService, ref);
    this.triumphTreeControl = new FlatTreeControl(this._getLevel, this._isExpandable);
    this.treeFlattener2 = new MatTreeFlattener(this.transformer2, this._getLevel, this._isExpandable, this._getChildren);
    this.hideComplete = localStorage.getItem('hide-completed-triumphs') === 'true';
    this.showZeroPtTriumphs = localStorage.getItem('show-zero-pt-triumphs') === 'true';
    this.showInvisTriumphs = localStorage.getItem('show-invis-triumphs') === 'true';
    this.loadTrackedTriumphIds();
  }

constructor(storageService: StorageService,
    public iconService: IconService,
    public state: PlayerStateService,
    public location: Location,
    private route: ActivatedRoute) {
    super(storageService);
    this.treeFlattener2 = new MatTreeFlattener(this.transformer, this._getLevel, this._isExpandable, this._getChildren);
    this.triumphTreeControl = new FlatTreeControl(this._getLevel, this._isExpandable);
  }

{'value': res[k]});
                }
            }

            return node_flat;
        }
        this.flat_node_map[node.id] = res;
        return res;
    };

    get_children = node => ofObservable(node.children);

    treeControl = new FlatTreeControl(
        node => node.level, node => node.expandable);

    treeFlattener = new MatTreeFlattener(
        this.transformer,
            node => node.level,
            node => node.expandable,
        this.get_children);

    dataSource = new MatTreeFlatDataSource(this.treeControl,
        this.treeFlattener);

    load() {
        let self = this;
        this.service.steps(this.task).subscribe(res => {
            if(!res || !res.data){
                return;
            }
            self.dataSource.data = res.data;
            self.treeControl.expandAll();