# Dart Angular
###### tags: `Work`
[TOC]
# Set Up Prerequisites
* Dart Version: 2.10.0 or a compatible version.
**For AngularDart 7:**
* SDK >= 2.17.0 is required
**Editor:**
* WebStorm, Eclipse, or Visual Studio Code (recommended)
# Set Up DartAngular
1. Must have set up [webdev](https://pub.dev/packages/webdev)
``` linux=
dart pub global activate webdev
```
Note: Must put webdev PATH to Bash or zsh.
**Set export in Bash or zsh:**
>Use echo $SHELL to confirm which terminal environment you are currently using, such as Bash, zsh
>Open the configuration file for the terminal environment:
>1. Bash: open ~/.bash_profile
>2. zsh: open ~/.zshrc[color=pink]
2.
# Installation ngdart_cli
Ref: https://pub.dev/packages/ngdart_cli
**ngdart_cli** is not required for AngularDart but it will be much easier when developing.
**Install by using:**
``` linux=
dart pub global activate ngdart_cli
```
**Create DartAngular project using:**
``` linux=
ngdart create <package_name>
```
# Angular Project Structure
>[color=pink]
## Project files' explanation
>[color=orange]
## Template set up
App design is set up by editing AppComponent 's @Component.
There are 2 ways tp set up:
1. Inline Template
2. Template file
## Inline Template
As the name states, you will be setting up all design in inline. In this case **@Component's template**.
``` dart=
@Component(
selector: 'my-app',
styleUrls: ['app_component.css'],
directives: [TodoListComponent],
template: '''
<h1>{{title}}</h1>
<h2>{{hero}}</h2>
''',
)
```
## Template file
By using template file, you can avoid large hard code inside the AppComponent file and also it will look much cleaner. In this case **@Component's templateUrl**.
``` dart=
@Component(
selector: 'my-app',
styleUrls: ['app_component.css'],
templateUrl: 'app_component.html',
directives: [TodoListComponent],
)
```
# Angular Structure
## Modules
``` dart=
// By convention, the root component is AppComponent.
class AppComponent {}
```
# Directives
**Types of directives:** https://www.simplilearn.com/what-are-directives-in-angular-article
Before you can use any Angular directives in a template, you need to list them in the directives argument of your **component’s @Component annotation**.
You can list directives individually, or for convenience you can use groups like CORE_DIRECTIVES.
**Example:**
``` dart=
import 'package:angular/angular.dart';
@Component(
selector: 'my-app',
// ···
directives: [coreDirectives],
)
```
## coreDirectives
**coreDirectives include the following:**
``` dart=
const coreDirectives = [
NgClass,
NgFor,
NgIf,
NgTemplateOutlet,
NgStyle,
NgSwitch,
NgSwitchWhen,
NgSwitchDefault,
];
```
If coreDirective not stated, you will probably see below error:
>Can't bind to 'xxx(Ex: ngFor)' since it isn't an input of any bound directive or a native property.[color=red]
### *ngFor
"let **variable** of **list**" will itinerate all over the list one by one.
``` dart=
<li *ngFor="let animal of animals">
{{ animal }}
</li>
```
### *ngFor with index
``` dart=
<div *ngFor="let animal of animals; let i=index">{{i + 1}} - {{animal.name}}</div>
```
### *ngIf
``` dart=
<p *ngIf="animals.length > 3">There are many animals!</p>
```
## formDirectives (angular_forms)
Ref: https://pub.dev/packages/ngforms
Must install pub below:
``` linux=
dart pub add ngforms
```
Sign in with Wallet
Connect another wallet