angular-template

This fork of the added Stackblitz solves the issue.
https://stackblitz.com/edit/angular-template-form-array-jf9h5v-uh3t4x

It seems that for the FormArray's controls, statusChanges doesn't emit the new status. But the array's statusChanges does. This can be used to properly validate the array.

Assuming your field are bound with [(ngModel)], you can simply disable to the search button if none are filled. So if for instance your fields were a and b and each are bound to a field, you could disable the button based on conditions - [disabled] = "!a && !b" for as many fields as you have. Then, the search would only be enabled once a field had been filled in

Angular documentation states that it's possible to write complex template expressions in template, but it's a better practice to avoid them if those expressions don't finish quickly. It means that we should avoid long executable computation in templates.

The reason is that Angular compiles templates into executable pieces of code that are executed during each change detection cycle. And if you have already been working for a while with Angular you should notice how many change detection cycles are executed in app.

So, taken your template:

Try adding static: true option to @ViewChild decorator:

A method called from the template, is called every change detection cycle. Because you are using the async pipe, the change detection is triggered with every emit. So basically you are creating an infinite loop and that's why it will never show a value, because the change detection never finishes:

1. on view init template calls foo$()
2. foo$() creates a -new- observable and delays the emit
3. the observable emits after the delay
4. the emit triggers a change detection from within the async pipe
5. change detection calls foo$() from the template, and we're back to step 2

It's not really clear what you are trying to achieve, but I don't think you should return Observables from methods to be consumed in templates. These should be readonly class field:

you set up your component so that things are run when they need to be run.

write a function like:

You cannot get the template content elements from the TemplateRef. The template reference is just a reference to the template not to the rendered template. It is represented as a comment node in the HTML DOM as you found and has no connection to the content.

I think for your case the solution is to define another directive that is applied to the input elements inside the templates. This way you can query easily also all the input elements using another @ContentChildren query.

For example such a directive could look like this: