import { HttpClientModule } from '@angular/common/http';
import { HttpClient } from '@angular/common/http'; // nakon toga samo inject u service

//rute
const routes: Route[] = [
  { path: '', component: UsersComponent },
  { path: 'users', component: UsersComponent },
  { path: 'adduser', component: AdduserComponent }
];

<a routerLink="/adduser" routerLinkActive="active" class="nav-link" href="javascript:void(0)">Add user</a>
<router-outlet></router-outlet>

//TEMPLATE FORM
<form (ngSubmit)="addUser(form)" #form="ngForm" class="col-md-9 offset-md-1">
  <div class="form-group">
    <label for="">Username</label>
    <input ngModel #username="ngModel" type="text" name="username" class="form-control" required>
    <span *ngIf="form.submitted && username.invalid || username.touched" class="helper-text">
      <small class="text-danger">
        Username is not valid
      </small>
    </span>
  </div>

//Animations

@Component({
animations:[
    trigger('todosAnimation', [
      transition(':enter', [
        group([
          query('h1', [
            style({ transform: 'translateY(-20px)'}),
            animate(1000)
          ]),
          query('@todoAnimation',
              stagger(200, animateChild())
          )
        ])
      ])
    ]),
    trigger('todoAnimation', [
      transition(':enter', [
        useAnimation(fadeInAnimation, {
          params: {
            duration: '500ms'
          }
        })
      ]),
      transition(':leave', [
        style({ backgroundColor: '#ff0000'}),
        animate(1000),
        useAnimation(fadeOutLeftAnimation)
      ])
    ])
  ]
});


//HTML

<div @todosAnimation>
  <h1>Todos</h1>

  <input #itemInput
    class="form-control"
    (keyup.enter)="addItem(itemInput)">

  <div *ngIf="items" class="list-group" >
    <button type="button"
      @todoAnimation
      (@todoAnimation.start)="animationStarted($event)"
      (@todoAnimation.done)="animationDone($event)"
      *ngFor="let item of items"
      (click)="removeItem(item)"
      class="list-group-item"
      >{{ item }}</button>
  </div>
</div>