Insert ng-content select dynamically

Question

Simply put, I want to pass in the select value into the component for ng-content as an input. It should look somewhat like this:

parent:

<child-component [selectedValue]="['[selectedHtml1]','[selectedHtml2]']">
  <div selectedHtml1>I'm inside!!</div>
  <div selectedHtml2>I'm inside also!!</div>
</child-component>

child-html:

<ng-content *ngFor="let value of selectedValue" select="{{value}}">

child-ts:

@Input() selectedValue: string[];

but when I do this I get an error saying

compiler.js:2175 Uncaught Error: Template parse errors:
Can't bind to 'select' since it isn't a known property of 'ng-content'.
1. If 'select' is an Angular directive, then add 'CommonModule' to the '@NgModule.imports' of this component.
2. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
    </mat-paginator>
  </div>
  <ng-content [ERROR ->]select="{{selectedValue}}"></ng-content>
</mat-card>
"): ng:///[path to my component]@[component line]
    at syntaxError (compiler.js:2175)
    at TemplateParser.parse (compiler.js:11388)
    at JitCompiler._parseTemplate (compiler.js:25961)
    at JitCompiler._compileTemplate (compiler.js:25949)
    at compiler.js:25893
    at Set.forEach (<anonymous>)
    at JitCompiler._compileComponents (compiler.js:25893)
    at compiler.js:25806
    at Object.then (compiler.js:2166)
    at JitCompiler._compileModuleAndComponents (compiler.js:25805)

Doing it with normal transclusion syntax works, so why doesn't this?

try looking into this - https://stackoverflow.com/questions/36755844/angular2-child-component-as-data/36760027#36760027 — Allabakash, Nov 22 '19 at 17:52

score 1 · Answer 1 · answered Nov 22 '19 at 17:14

1

In your html

<ng-content #select="{{selectedValue}}">

and in .ts

@ViewChild(select)

answered Nov 22 '19 at 17:14

AlleXyS

2,476
2
17
37

But you can't dynamically make ViewChild's can you? So if I wanted to pass in an array of names for ng-content selections and then ngFor through the array to make an adjacent list it won't work. – Raults Nov 22 '19 at 17:17
I've edited the OP to match more closely what I'm doing. Thanks for pointing out that what I requested could be done. – Raults Nov 22 '19 at 17:20
Try to use ViewChildren instead ViewChild for multiple attributes : https://angular.io/api/core/ViewChildren#viewchildren – AlleXyS Nov 22 '19 at 17:28
Will that require me to manually input the ViewChildren every time my list changes and html changes that I put between the child component tags in the parent? – Raults Nov 22 '19 at 17:32
like will I be able to pass in an array-like a variable to the component to declare the view children or do I have to manually put it into the component for any case of multiple and different view children? Cause that COULD work, but it won't be dynamic. – Raults Nov 22 '19 at 17:33
Ok, so my brain finally wrapped around this. I would have to make selectors still which means this is not a dynamic solution. It would instead be like "I'm making multiple children in a group," but those children cannot be dictated by the parent. At least, that;s my understanding from what I read. – Raults Nov 22 '19 at 18:20

Insert ng-content select dynamically

1 Answers1