ngSemantic
ngSemantic copied to clipboard
vladotesanovic
Template parse errors: 'card-title' is not a known element:
I just copied a html content from the example: https://ng-semantic.herokuapp.com/#/elements/card
The
I don't know what should I do.
I figured out this is an Angular RC6 issue: https://github.com/angular/angular/issues/11251
Regarding the comments the most suitable / future proof way would be use class names or custom attributes for all ng-content. The CUSTOM_ELEMENTS_SCHEMA is just a workaround.
So I suggest to change all ng-content selectors:
a. classname: <ng-content select=".card-title"> | html: <div class="card-title">
b. atribute: <ng-content select="[card-title]"> | html: <div card-title>
Personally I prefer the b. way because it requires less html and that wouldn't break the concept of class should be used for styling.
It is indeed a matter of style. @vladotesanovic, which one do you think we should adopt ? Should we use the class selector form, the attribute selector form, or the component selector form ?
I hope the decision will be taken soon, because this makes unusable a lot of components!
Well, I haven't seen @vladotesanovic for days. Let's wait the end of the week, I'll merge a bunch of PR if he's not here. In the meanwhile, could you give us your suggestion regarding this matter with some explanation ? :) As for myself, I'd rather have custom elements, since semantically, attributes refers to a html node property and classes refers to style.
I prefer actually the b. option (the attribute) wrote by @ggaborx for almost the same reasons! I don't care about writing "less or more html" but it's very important here to not break the concept of classes. It would be very unpleasant to be forced to attach a class to an element for a completely different reason than styling that element (we did that a lot actually in the past few years with libraries like jQuery etc. but this is also the reason why new possibilities like attributes came out).
Hoping that I expressed myself in a decent way.
Fair enough :) That was a good point. There is no best way to do it anyway : we just have to pick one which looks logical and correct. Yours is. Let's wait a bit then ;)
Any progress on this? Just found this project and it looks great in theory - I want to use cards though (I assume more components don't work too)!
Hello. I am runnin in this issue too.
In my opinion. a framework which main objective is to create HTML components must allow the option of transclusion with element names.
It's much more elegant, readable and less verbose this:
<my-component>
<my-component-title>title</my-component-title>
<my-component-content>content</my-component-content>
</my-component>
instead of using CSS selectors. It seems to the common sense that the right way of doing things is the first option.
Any word on this? @vicb seemed pretty adamant that the error message was worth more than this use case. It is a really useful error message for a common problem. That being said, I am frustrated that he shutdown the discussion on https://github.com/angular/angular/issues/11251, as his multiple ways to solve this all feel really hacky. @YagoLopez 's approach is really intuitive, and I would love to see this implemented (Especially since this was the way it was originally done and we lost it due a breaking change in a release candidate :/).
I get the exact same errors with accordion-title. Any Updates? @vladotesanovic
Instead of using accordion-title, i fall back to use <div class="title">. And it is working for me, including nested accordions.
<sm-accordion class="styled">
<ng-template let-user ngFor [ngForOf]="users">
<div class="title">
<i class="dropdown icon"></i>
{{user.name}}
</div>
<div class="content">
<p>{{user.description}}</p>
</div>
</ng-template>
</sm-accordion>
I came across this issue too when I was trying to use the card-title. Has this problem been fixed?
