Артур

Привет.
Буду опираться на твой же код.

Реализация данного интерфейса позволяет ангуляровской форме взаимодействовать с кастомным компонентом. В метод

writeValue(value: any) {
   this.formControlName = value;
  }

прокидывается то значение, которое ты передаешь в formControlName. Заметь, это не Binding, как между компонентами. Чтобы значение передалось надо сказать форме прямо и конкретно

form.setValue({email: "email", password: 'passworddd'})
// или 
form.patchValue({email: "email"})

А чтобы динамически считать значение, которое ты прокинешь через функцию this.propagateChange(val) , надо уже работать с изменением формы

this.filterForm.valueChanges
      .pipe(
        takeUntil(this._onDestroy$)
      )
      .subscribe((val) => {
       console.log(val);
      });

И ты пойми что же ты хочешь. Прокидывать параметры в компонент (binding) или прокидывать значение формы в компонент (ControlValueAccessor).

p.s. напиши в своем коде, и посмотри как в консоль валятся значения формы из уже дочернего компонента.

initForm() {
    this.SignupReactiveForm = this.fb.group({
      password: ['password', [
        Validators.required,
        Validators.pattern(/[A-z]/)
      ]
      ],
      email: ['email', [
        Validators.required, Validators.email
      ]
      ],
      

    });
  }

}

https://metanit.com/web/angular2/ - это не книга, но мне помогло в свое время.

Все вышеописанные ответы в чем-то правы.
А еще можно задать себе вопрос стоит ли изучать AngularJS? В чем разница между AngularJS и Angular.

Но вообще, если речь идет об AngularJS, то без знания JS там будет трудно и непонятно. Аналогия такая: JS - это знания о том, какие слова существуют, как строить предложения, как можно вежливо послать на* гору кого-то; а фреймфворк - это просто описание того, как составить все эти вежливости, чтобы получить жанр Фантастика.

p.s. Когда встает вопрос "или это, или то", то выбирай "и это, и то" ))

Добавлю про сам фильтр, ибо Alex уже высказался об общей концепции.

Если данных для таблицы много, то для фильтра отправляй каждый раз запрос на сервер.
Если данных столько, что ты их видишь всегда сразу, то фильтруй просто в компоненте. *ngFor поможет.

Тебе потребуется знание bananaInTheBox [(ngModel)] https://angular.io/api/forms/NgModel

Дима Долготер
Отрадно видеть устремленного в высь человека :)
1. Как заметил товарищ, ангуляр материалс - это просто набор компонентов. Скажу по опыту, хороших компонентов. Просто эдакие кубики, как , например.
2. Для освоения ангуляра потребуется чтение официальной доки angular.io. Я в свое время начинал с https://metanit.com/web/angular2/.
Насчет видеоуроков соглашусь немного. Тебе будет сложно найти "ИМЕННО ТОТ САМЫЙ" видеоурок. Их просто напросто очень много. Лучше начни с документации, а по мере возникновения вопросов ищи конкретно.

p.s. таблички делать - это хорошо ))

Артем, есть еще один вариант. Он похож, но его можно встретить у различных создателей кучи всяких компонентов для ангуляра.
Использование пустых директив.

<div class="table-body">
    <ul class="table-list"
        directiveList>
      <li *ngFor="let item of items; let i = index; trackBy: trackByFn"
           class="table-item" directiveItem>
          {{item}}
      </li>
    </ul>
  </div>

Имеется директива directiveList, имеется директива directiveItem.
В классе directiveList находится список этих "дочерних" элементов.

@Directive({
  selector: '[directiveList]',
  exportAs: 'directiveList'
})
export class DirectiveList {
/**
   * Children directives which placed on items
   */
  @ContentChildren(DirectiveItem, {read: ElementRef}) // получаем сразу как список ссылок на компоненты класса
  private _items: QueryList<DirectiveItem>;
}

ngAfterContentInit() {
    this._items.changes.subscribe(() => {
      this.coolFunc();
    });

}

В чем отличие?
Ты отвязываешься от работы с элементами в компоненте. Т.к. сегодня ты хочешь что-то делать со списком элементов, а завтра не хочешь, для этого ты просто уберешь директивы. Компонент практически не изменится.

Но в любом случае через @ContentChildren.

p.s. совсем забыл. Вот сама пустая директива

@Directive({
  selector: '[directiveItem]'
})
export class ClassNewInViewItemDirective {

  constructor() { }

}

Слушай, классный вопрос.

Заставил пошерстить документацию и применить дедукцию )))
В итоге вот тебе развернутый ответ.

1. Urukhayy дал частично правильный ответ. Ну, то есть он корректно заметил, что запись вида
@Output() TestEvent = new EventEmitter();
предпочтительней, чем запись вида

@Output('eventEmitterAlias') blaBlaBla = new EventEmitter();

Ангулярщики сами уже не рекомендуют использовать алиасы, даже tslint в нормальных проектах ругается на это и говорит, что способ когда указывается alias не очень крут, и лучше таким способом не пользоваться. Сложно будет отследить эти методы в коде, и уже точно невозможно будет в студии "провалиться" в код.
Но ты можешь так делать, чисто технически :):)
Да и вообще в Typescript принято писать в camelCase стиле (testEvent). PascalCase это уже больше на C# похоже.

2. По существу.
Из документации по ангуляр (https://angular.io/guide/bootstrapping#the-bootstr... стало ясно, что те компоненты, которые прописаны в bootstrap создаются при запуске приложения. Каждый с нуля со своей структурой дочерних компонентов.
Что это значит для нас?
Ты создал AppComponent, в котором создался MainComponent со всеми нужными связями (@Output). А дальше система создала отдельно MainComponent и поместила куда следует, оторванного от родителя, сиротинушку такого. Связь потеряна. В этом и было дело.

А чтобы увидеть это - в MainComponent добавь

constructor() {
    console.log('main component create');
}

И проследи, сколько раз компонент создался.

Заключение:
Вопрос огонь! Поработай над стилем. Никто не пишет punkt. Представь, что заказчик иностранец. (menuPoint, link, item, point) - item супер вариант ))). Почитай про style-guide ангуляр. Поможет найти общий язык с другими ангулярщиками :):)

/** Form (ngSubmit) handler  **/ 
    submitForm() {
        if (!!this.query)
            this.router.navigate([`/${this.currentLang}/search`, this.query, 1]);
            this.query = '';
    }