Ivan Stroykin

heigh: calc(100vh-100px);

Картинка травы, картинка бумаги, в бумаге "режем" дырку, делаем тень, под низ кладем листья. Листья которые должны торчать или отбрасывать тень вырезаем в отдельный слой. кладем поверх слоя бумаги, настраиваем тени.

Чуть не забыл, снизу пишем гельветикой текст.

https://necolas.github.io/normalize.css/

Вот пару примеров из курса проектирования АСОИУ https://yadi.sk/i/KTRP6OeI38NmZZ

погуглите ПРОЕКТИРОВАНИЕ АСОИУ - я не помню как нотации называются ....IDEF0 и прочие



погуглите еще - " Диаграмма классов, Диаграмма развертывания

для построения диаграмм я использовал enterprise architect
или draw.io

стили отличаются.

Обычно такие кастомные директивы делают совместимыми с инструментами для работы с формами - делают кастомными контролами формы через реализацию интерфейса ControlValueAccessor
custom-form-controls-in-angular-2

Еще могу увлекательную статью на тему форм посоветовать, где применяется подобная техника
Building Tesla's battery range calculator with Ang...

Вот пример того, как это можно реализовать для datepicker (Plunker)

@Component({
  selector: 'saUiDatepicker',
  template: `<input type="text" #input class="form-control datepicker" placeholder="{{placeholder}}" [(ngModel)]="value" (blur)="onBlur()">`,
  providers: [CUSTOM_UI_DATEPICKER_CONTROL_VALUE_ACCESSOR]
})
export class UiDatepickerComponent implements OnInit, ControlValueAccessor {
  private innerValue: any = '';

  private onTouchedCallback: () => void = () => { };
  private onChangeCallback: (_: any) => void = () => { };

  get value(): any {
    return this.innerValue;
  };

  set value(newValue: any) {
    if (newValue === this.innerValue) return;

    this.innerValue = newValue;
    this.onChangeCallback(newValue);
  }

  @Input() options: any;
  @Input() placeholder: any;

  @ViewChild('input') el: ElementRef;

  onBlur() {
    this.onTouchedCallback();
  }

  writeValue(value: any) {
    if (value !== this.innerValue) {
      this.innerValue = value;
    }
  }

  registerOnChange(fn: any) {
    this.onChangeCallback = fn;
  }

  registerOnTouched(fn: any) {
    this.onTouchedCallback = fn;
  }

  ngOnInit() {
    let options = $.extend(this.options || {}, {
      onSelect: (selectedDate) => {
        this.onChangeCallback(selectedDate);
      }
    });

    System.import('jquery-ui').then(() => {
      const datePicker = $(this.el.nativeElement).datepicker(options);
      if (this.value) {
        datePicker.datepicker("setDate", this.value);
      }
    });
  }
}

Использование в template-driven forms

<form #templateForm="ngForm" (ngSubmit)="submit(templateForm.value)">
  <saUiDatepicker name="data" [(ngModel)]="data" [options]="{...}" 
         placeholder="Выберите дату"></saUiDatepicker>    
  <button type="submit">Submit</button>
</form>

И reactive/model-driven forms

<form [formGroup]="reactiveForm">
   <saUiDatepicker formControlName="data" [options]="{...}" 
       placeholder="Выберите дату"></saUiDatepicker>  
    <pre>{{ reactiveForm.value | json }}</pre> 
</form>

constructor(private fb: FormBuilder) {}
  
ngOnInit() {
  this.reactiveForm = this.fb.group({
      data: ''
  });
}

Что значит шаренные компоненты?

<test-input></test-input>
  <test-select></test-select>

Если ты про них, то более правильно это называется (дочерние директивы) по отношению к тому в котором они вызываются.

Если ты хочешь передать в них значение тебе нужно использовать декотораторы, что бы принять эти значения.

<test-input [value]="data"></test-input>

import { Component, Input } from '@angular/core';
  
  @Component({
     selector: 'test-input'
  })

  export class TestInputComponent {
     // Тут значение принимается!
     // Тип значения должен стоять тот, который ожидается
    // @Input() - это то что называется декоратором, он служит для передачи значений между директивами
     @Input()
      value: any;
  }

В Angular2 currency pipe в конечном счете исполняет вот эту функцию

new Intl.NumberFormat([locales[, options]])

https://developer.mozilla.org/ru/docs/Web/JavaScri...

Чтобы pipe вернул русский символ рубля. ему нужно подставить правильную локаль ru-RU. Ее можно переопределить глобально, но раз ты используешь разные котировки, то можно сделать кастомный pipe

К примеру вот так может работать (Plunker):

import { CurrencyPipe } from '@angular/common';

const map = {
  'RUB': 'ru-RU',
  'JPY': 'ja-JP'
}

@Pipe({name: 'localizedCurrency'})
export class LocalizedCurrencyPipe implements PipeTransform {
  transform(value: any, currencyCode: string = 'USD', 
          symbolDisplay: boolean = false, digits: string = null): string {
    return new CurrencyPipe(map[currencyCode]).transform(value, currencyCode, symbolDisplay, digits);
  }
}

Атрибут со звёздочкой - это синтаксический сахар для элемента template. Переписать можно вот так:

<template ngFor let-row [ngForOf]="review.penalty">
    <tr *ngIf="row.sum > 10">
        <td>{{row.name}}</td>
        <td>{{row.sum | number:'.2'}}</td>
    </tr>
</template>

Можно
1) обернуть в ng-container

<ng-container *ngFor="let row of review.penalty">
  <tr *ngIf="row.sum > 10">
    <td>{{row.name}}</td>
    <td>{{row.sum | number:'.2'}}</td>  
  </tr>
</ng-container>

Пример

2) использовать template

<template ngFor let-row [ngForOf]="review.penalty">
  <tr *ngIf="row.sum > 10">
    <td>{{row.name}}</td>
    <td>{{row.sum | number:'.2'}}</td>  
  </tr>
</template>

Пример

Если вы "джун-бэкэндер" - основ вполне достаточно. А если Вы как у нас на просторах бывшего СССР любят - сис. админ + программист + верстальщик и ещё неплохо если дизайнер и электрик в одном лице - то... делайте выводы соответственно :)

Как создать вложенность ссылок?

никак. нельзя вкладывать ссылки в ссылки.
правильная структура должна быть такой в вашем случае: https://jsfiddle.net/pL7e51h1/2/

https://jsfiddle.net/webirus/mb7ouuvn/1/

https://docs.djangoproject.com/en/1.10/ref/django-...

Вся логика на Angular 2 делается через классы-сервисы. Достаточно выполнить 3 простых шага:

1. К примеру, в user.service.ts добавим информацию об авторизованном пользователе.

2. Создадим сервис AuthGuard, который будет отвечать за авторизацию. Он должен имплементировать интерфейс CanActivate

@Injectable()
export class AuthGuard implements CanActivate {
  constructor(private userService: UserService) {}

  canActivate(route: ActivatedRouteSnapshot, state:RouterStateSnapshot): Promise<boolean>|boolean {
    return this.userService.isAuth;
  }
}

3. В описании путей укажем класс, отвечающий за проверку доступа:

{
    path: 'logout',
    component: LogoutComponent,
    canActivate: [AuthGuard]
  },
  {
    path: 'login',
    component: LoginComponent,
    canActivate: [GuestGuard]
  },

Для таких вещей обычно используют APP_INITIALIZER

Как загрузить данные с сервера до того как загрузится приложение?

Есть вероятность, что ты присваиваешь новый (обработанный) массив. Ссылка на прежний массив теряется, мусорка увозит все данные - вот всё и пропадает. Нужно работать с оригиналом или присваивать новый массив компоненту заново.