View dạng tree ul trong angular 6

hehe, answer myself
this is component

import { Component, Input } from '@angular/core';

@Component({
  selector: 'hello-tree2',
  template: 
  `
    <div class="box2">
      this is hello tree2 component
      <b>View</b><br>
      <ol>
        <li *ngFor="let x of ar" >
          <a href="#{{x.ten}}">{{x.ten}}</a>
          <ol *ngIf=" x.list ">
            <li *ngFor="let y of x.list" >
              <a href="#{{x.ten}}/{{y.ten}}">{{y.ten}}</a>
            </li>
          </ol>
        </li>
      </ol>

    </div>
  `,
  styles:[
    '.box{border:1px solid blue}',
    '.box2{border:1px solid green;padding:5px;margin:5px;}'
  ]
})
export class HelloTree2Component {
  @Input() name: string;
  ten="thuc 101";
  ar=[
    {ten:"Đạo đức"},
    {ten:"Tự nhiên",
      list:[
        {ten:"Toán"},
        {ten:"Lý"},
      ]
    },
    {ten:"Xã hội",
      list:[
        {ten:"Văn"},
        {ten:"Sử"},
      ]
    },
  ];


}

https://plnkr.co/edit/Kypcld?p=preview
hix, kể ra cũng đẹp nhệ, cái này cài thêm xóa sửa trển thì coi như angular 6 nhuyễn nhừ củ từ.
Xem ra không nên tham vọng tree đa cấp, nếu muốn xài thì nên kiếm mấy cái các pro dựng sẵn!!!

Chưa nhuyễn đâu, nếu sâu cấp hơn thì sao

Xem ra không nên tham vọng tree đa cấp, nếu muốn xài thì nên kiếm mấy cái các pro dựng sẵn!!!

hì, làm bài dễ dễ thôi.