Angular 구조 지침

When it comes to control the appearance of the visual tree elements’ appearance in WPF, the most common way is to use binding and visibility converter, which requires some extra logic and static resources. Angular also has a similar technique, which changes the appearance or behavior of a DOM element - the Angular directives. One of the Angular directives type is the structural directives – they change the DOM layout by adding or removing DOM elements.

In this topic, we are going to demonstrate the following three structural directives - ngIf, ngSwitch and ngFor. As one can tell from their names, each of these can be compared to a C# structure. The ngIf is the same thing as an "if-else" C# code block, the ngSwitch is the same thing as the C# switch-case statement and, lastly, the ngFor is the exact same thing as a C# "for-loop".

ngIf Directive

Let’s explore each of these directives, starting with the ngIf. This directive allows us to show or hide elements based on a boolean condition. We will start by creating a "div" element with an "h2" tag containing a name.

<div>
  <h2>John</h2>
</div>

If we save this, our browser will render the name John. However, let’s say we have some type of boolean expression that we want to base the condition of the visibility of this "h2" tag on. For example, we are going to add a property called "isFirstName" and set it to false. In order to tell our div to be rendered when isFirstName equals true, we should use the following syntax *ngIf = "isFirstName".

public isFirstName = false;

<div *ngIf="isFirstName">
  <h2>John</h2>
</div>

Once we save the files, and because isFirstName is false, we will see that the name is no longer rendered in the browser. However, if we were to update isFirstName to be true, the "John" first name will be rendered in the browser. If we set isFirstName back to false, we'll notice that the first name is no longer rendered in our browser, instead it's empty. That's the default behavior of the ngif statement - if the expression is true we render the provided template otherwise it's empty.

WPF로 동일한 동작을 달성하려면 가시성 변환기를 사용해야 합니다. 코드는 다음과 유사합니다.

public bool IsFirstName { get; set; }
public Sample()
  {
      InitializeComponent();
      this.DataContext = this;
      this.IsFirstName = true;
  }

<UserControl.Resources>
  <BooleanToVisibilityConverter x:Key="VisibleIfTrueConverter" />
</UserControl.Resources>
<Grid>
  <Label Visibility="{Binding Path=IsFirstName, Converter={StaticResource VisibleIfTrueConverter}}">John</Label>
</Grid>

Angular 에서는 훨씬 쉽고 간단합니다.

Let's create a requirement that states if the isFirstName property is false we want to provide a last name instead. To do that we're going to take advantage of the "else" clause of the ngIf directive. Let's start by creating an ng-template defining an "h2" tag which contains the last name. An ng-template is simply a placeholder that allows us to define content that is not part of the DOM, but can be added via code such as using the ngIf directive. But, in order to use this in the directive, we need to give it a template reference variable name such as "lastname". Now that we have named our ng-template, let's go into our ngIf directive, add "; else lastname" and save this. Because "isFirstName" is false, we are saying else use the lastname, which means are using the template with the last name.

<div *ngIf="isFirstName; else lastname">
  <h2>John</h2>
</div>
<ng-template #lastname>
  <h2>Doe</h2>
</ng-template>

이제 이것을 작성할 수 있는 또 다른 방법은 "isFirstName, 그 다음에는 firstname, else lastname "이라고 말할 수 있습니다. 따라서 그렇게 하려면 "firstname"이라는 또 다른 템플릿을 만들어야 합니다.

<div *ngIf="isFirstName; then firstname; else lastname">
</div>
<ng-template #firstname>
  <h2>John</h2>
</ng-template>
<ng-template #lastname>
  <h2>Doe</h2>
</ng-template>

If we change "isFirstName" to true, the first name will be rendered in the browser. And one final tip on using the ngIf directive is that the expression is not limited to a single property - you can actually use multiple properties and/or functions as long as the expression as a whole returns a boolean result. For example we can even use logical operators such as " && isValid || getIsValidName()".

ngSwitch Directive

The next directive we will discuss is the ngSwitch directive. This allows us to compare one expression to multiple expressions to decide which templates to add or remove. Let’s say we have "h2" elements that represent makes of cars – Chevy, Ford and GMC. We would like to display only one of these items based on a value of a "make" property which we have defined in our typescript file with a default value of "Chevy". To achieve this we need to use the ngSwitch directive with the following syntax [ngSwitch] = expression where expression is our "make" property. Adding this to the "div" element wrapping the "h2" tags is not enough. Like in WPF, we need to add some "case" statements to each "h2" element. The syntax for that is *ngSwitchCase = expression. In this case, we are comparing directly against text, so we will add single quotes around the value which means that the final result would be *ngSwitchCase = "'Chevy'" /similar for the other two values/.

make = "Chevy";

<div [ngSwitch]="make">
  <h2 *ngSwitchCase="'Chevy'">Chevy</h2>
  <h2 *ngSwitchCase="'Ford'">Ford</h2>
  <h2 *ngSwitchCase="'GMC'">GMC</h2>
</div>

Once we save that, we are only going to see the Chevy option rendered in the browser because the value of our "make" property is set to "Chevy". If we change it, to say "GMC", and save that, only the GMC option will be rendered in the browser. Now, what happens if we add an option that is not available, say the "Lambo". Nothing would be rendered because that did not match any of our conditions. When we normally use a switch statement inside of C#, we have not only the case but also default value. The same is available in Angular – we can add another option with the "Not Found" text and mark it with the *ngSwitchDefault which will act as the default value if none of the other values are found.

<h2 *ngSwitchDefault>Not Found</h2>

이 경우 Lambo를 찾고 있다면 Lambo 옵션이 없으므로 "찾을 수 없음"인 기본 케이스로 전환하고 브라우저에 "찾을 수 없음"이 렌더링됩니다. 우리가 지적해야 할 한 가지 점은 이것이 표현식이기 때문에 우리가 전달하는 표현식과 일치하는 결과를 반환하는 한 함수라도 사용할 수 있다는 것입니다. 매우 간단합니다!

ngFor Directive

Next up is the ngFor directive. This directive allows us to iterate through a collection of objects and add a template for each item in that collection. Let's start by adding a collection of objects in our typescript file. We are going to call this an array of makes and add Chevy, Ford, GMC and Dodge. Next we will create a "div" and for each "div" we're going to create an "h2" tag that lists out the name of that make. To do that we are going to use the ngFor directive - the syntax for that *ngFor="let make of makes". That provides us the ability to use interpolation to use the "make" property that is defined via the "let make" portion of the expression and print that out in the "h2" tag.

makes = ["Chevy", "Ford", "GMC", "Dodge"];

<div *ngFor="let make of makes">
  <h2>{{ make }}</h2>
</div>

If all went well, we should see that for each item in that array we are using an h2 tag to represent that in the browser. In addition, the ngFor directive provides a few helper items that allow us to get more information about that collection such as:

• "index as i" - 각 항목의 인덱스가 무엇인지 결정할 수 있습니다.

<div *ngFor="let make of makes; index as i">
  <h2>{{ i }} - {{ make }}</h2>
</div>

• "first as f" - 항목이 컬렉션의 첫 번째 항목인지 여부를 얻을 수 있습니다.

<div *ngFor="let make of makes; first as f">
  <h2>{{ f }} - {{ make }}</h2>
</div>

• "last as l" - 컬렉션의 마지막 행이나 마지막 항목을 가져올 수도 있습니다.

<div *ngFor="let make of makes; last as l">
  <h2>{{ l }} - {{ make }}</h2>
</div>

• "odd as o" 또는 "even as e" - 컬렉션의 항목이 홀수 위치에 있는지 짝수 위치에 있는지 판단할 수 있습니다.

<div *ngFor="let make of makes; odd as o">
  <h2>{{ o }} - {{ make }}</h2>
</div>

이것이 각도 애플리케이션에서 뷰에 요소를 추가하고 제거하는 것이 얼마나 쉬운지입니다. 구조적 지시문을 사용하면 작업이 완료됩니다.

Additional Resources

• 데스크톱에서 웹으로: Angular의 구조적 지시
• Angular 구조 지침

우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.

• Ignite UI for Angular 포럼
• ​GitHub Ignite UI for Angular