Armenvardanyan95

interface Movie {
  id: number;
  title: string;
}

@Component({
  selector: 'app-some-component-with-form',
  template: `...` // our form is here
})
export class SomeComponentWithForm {

Armenvardanyan95

interface Movie {
  id: number;
  title: string;
}

interface User {
  firstName: string;
  lastName: string;
  age: number;
  favoriteMovies: Array<Movie | number>;

Armenvardanyan95

@Component({
  selector: 'app-some-component-with-form',
  template: `...` // our form is here
})
export class SomeComponentWithForm {

  public form: FormGroup;
  public movies: Array<Movie>

  constructor(private formBuilder: FormBuilder){

Armenvardanyan95

@Component({
  selector: 'some-component',
  template: `
    <div>
      <dropdown-component [options]="weightUnits"></dropdown-component>
      <-- This will render a dropdown based in the options -->
      <input type="text" placeholder="Price">
      <dropdown-component [options]="weightUnits"></dropdown-component>
      <-- We need to make this one's labels to be preceded with a slash -->
    </div>

Armenvardanyan95

@Component({
  selector: 'some-component',
  template: `
    <div>
      <dropdown-component [options]="weightUnits"></dropdown-component>
      <input type="text" placeholder="Price">
      <dropdown-component [options]="slashedWeightUnits"></dropdown-component>
      <-- Now this one's labels  will be preceded with a slash -->
    </div>
`

Armenvardanyan95

@Component({
  selector: 'some-component',
  template: `
    <div>
      <dropdown-component [options]="weightUnits"></dropdown-component>
      <input type="text" placeholder="Price">
      <dropdown-component [options]="slashedWeightUnits"></dropdown-component>
      <-- Now this one's labels  will be preceded with a slash -->
    </div>
`

Armenvardanyan95

@Pipe({
  name: 'slashed'
})
export class Slashed implements PipeTransform {
  transform(value){
    return value.map(item => {
      return {
        label: '/' + item.label,
        value: item.value
      };

Armenvardanyan95

@Pipe({
  name: 'map'
})
export class Mapping implements PipeTransform {
  /* 
  this will be a universal pipe for array mappings. You may add more 
  type checkings and runtime checkings to make sure it works correctly everywhere
  */
  transform(value, mappingFunction: Function){
    return mappingFunction(value)

Armenvardanyan95

interface User {
  fullname: string;
  age: number;
  createdDate: string | Date;
}

Armenvardanyan95

interface Order {
  status: 'pending' | 'approved' | 'rejected';
}