Angular

#02 Tutorial (ngIf, ngFor)

JayLee 2019. 12. 8. 02:00
반응형

- ngFor를 이용해서 배열을 출력할 수 있다. ngFor를 쓸때는 반드시 앞에 *를 붙여줘야한다.

    <ul class="heroes">
      <li *ngFor="let hero of heroes"
        [class.selected]="hero === selectedHero"
        (click)="onSelect(hero)">
        <span class="badge">{{hero.id}}</span> {{hero.name}}
      </li>
    </ul>

- Style도 `를 이용하여 멀티 라인 텍스트로 사용가능하다.

styles: [`
  .selected {
    background-color: #CFD8DC !important;
    color: white;
  }
  .heroes {
    margin: 0 0 2em 0;
    list-style-type: none;
...
...
...
    margin-right: .8em;
    border-radius: 4px 0 0 4px;
  }
`]

- ngIf를 사용하면 해당 데이터가 있을 때만, 보여주게 할 수 있다. ngIf 또한 앞에 *를 반드시 붙여줘야한다.

<div *ngIf="selectedHero">
  <h2>{{selectedHero.name}} details!</h2>
  <div><label>id: </label>{{selectedHero.id}}</div>
  <div>
    <label>name: </label>
    <input [(ngModel)]="selectedHero.name" placeholder="name"/>
  </div>
</div>

- Dom의 구조를 변경할 수 있기 때문에, ngIf와 ngFor를 'structural directives' 라고 부른다.

반응형

'Angular' 카테고리의 다른 글

#03 Tutorial (Multiple Components)  (0) 2019.12.09
#02 Tutorial (ngIf, ngFor)  (0) 2019.12.08
#01 Tutorial (ngModel)  (0) 2019.12.07
[Study AngularJS] 앵귤러 아키텍처  (0) 2017.08.25