<mbsc-form>
    <mbsc-form-group>
        <mbsc-form-group-title>Hierarchical listview</mbsc-form-group-title>
        <mbsc-listview [options]="listviewSettings">
            <mbsc-listview-item *ngFor="let conti of data">
                <span class="{{conti.cl}}"> </span> {{conti.name}}
                <mbsc-listview-sublist>
                    <mbsc-listview-item *ngFor="let country of conti.children">
                        <img [src]="country.imgsrc" /> {{country.name}}
                        <mbsc-listview-sublist>
                            <mbsc-listview-item *ngFor="let city of country.children">
                                {{city.name}}
                            </mbsc-listview-item>
                        </mbsc-listview-sublist>
                    </mbsc-listview-item>
                </mbsc-listview-sublist>
            </mbsc-listview-item>
        </mbsc-listview>
    </mbsc-form-group>
    <div class="mbsc-padding">The listview can also be rendered inside a card</div>
    <mbsc-card>
        <mbsc-listview [options]="insideCardSettings">
            <mbsc-listview-item *ngFor="let conti of data">
                <span class="{{conti.cl}}"> </span> {{conti.name}}
                <mbsc-listview-sublist>
                    <mbsc-listview-item *ngFor="let country of conti.children">
                        <img [src]="country.imgsrc" /> {{country.name}}
                        <mbsc-listview-sublist>
                            <mbsc-listview-item *ngFor="let city of country.children">
                                {{city.name}}
                            </mbsc-listview-item>
                        </mbsc-listview-sublist>
                    </mbsc-listview-item>
                </mbsc-listview-sublist>
            </mbsc-listview-item>
        </mbsc-listview>
    </mbsc-card>
</mbsc-form>

.demo-main-cont.demo-comp-listview { padding: 0; }
.demo-comp-listview .demo-note { margin: 10px; }

.md-country .mbsc-lv-img {
    margin-top: -.6em;
    width: 2em;
}

.md-continent {
    font-size: 36px;
    position: absolute;
    height: 1em;
    width: 1em;
    top: 50%;
    margin-top: -.5em;
    text-align: center;
}

.mbsc-ltr .md-continent {
    left: .42em;    
}

.mbsc-rtl .md-continent {
    right: .42em;    
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule, HttpClientJsonpModule } from '@angular/common/http';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MbscModule } from '@mobiscroll/angular';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    MbscModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
    HttpClientJsonpModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }