Comments (6)
You are the best! Did I miss something in the documentation or why couldn't I find anything there? I think it would be nice to mention this finding in the documentation.
from coreui-angular.
@gaweCodes any details about the error? NullInjectorError: No provider for
... (what)?
from coreui-angular.
I am not sure if this is really relevant. I have no idea what is missing.
ERROR Error: NullInjectorError: No provider for r!
at new Q (main.js:23:1976)
at Jp.get (main.js:23:91590)
at Rh.get (main.js:23:94541)
at Rh.get (main.js:23:94541)
at pb.get (main.js:23:114715)
at su (main.js:23:74154)
at el (main.js:23:74648)
at Object.Dc (main.js:23:100425)
at f.ɵfac [as factory] (main.js:23:340219)
at Xi (main.js:23:76344)
...
This is my template code:
<c-accordion>
<c-accordion-item #item0="cAccordionItem" [visible]="false">
<ng-template cTemplateId="accordionHeaderTemplate">
<button (click)="item0.toggleItem()" [collapsed]="!item0.visible" cAccordionButton>
Accordion item #0
</button>
</ng-template>
<ng-template cTemplateId="accordionBodyTemplate">
<div class="accordion-body">
<strong>This is the first item's accordion body.</strong> It is hidden by default, until the collapse
plugin adds the appropriate classes that we use to style each element. These classes control the overall
appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with
custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go
within the <code>.accordion-body</code>, though the transition does limit overflow.
</div>
</ng-template>
</c-accordion-item>
<c-accordion-item #item1="cAccordionItem" [visible]="false">
<ng-template cTemplateId="accordionHeaderTemplate">
<button (click)="item1.toggleItem()" [collapsed]="!item1.visible" cAccordionButton>
Accordion item #1
</button>
</ng-template>
<ng-template cTemplateId="accordionBodyTemplate">
<div class="accordion-body">
<strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse
plugin adds the appropriate classes that we use to style each element. These classes control the overall
appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with
custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go
within the <code>.accordion-body</code>, though the transition does limit overflow.
</div>
</ng-template>
</c-accordion-item>
<c-accordion-item #item2="cAccordionItem" [visible]="false">
<ng-template cTemplateId="accordionHeaderTemplate">
<button (click)="item2.toggleItem()" [collapsed]="!item2.visible" cAccordionButton>
Accordion item #2
</button>
</ng-template>
<ng-template cTemplateId="accordionBodyTemplate">
<div class="accordion-body">
<strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse
plugin adds the appropriate classes that we use to style each element. These classes control the overall
appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with
custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go
within the <code>.accordion-body</code>, though the transition does limit overflow.
</div>
</ng-template>
</c-accordion-item>
</c-accordion>
This imports are in the module that holds the component:
import {
AccordionModule,
ButtonModule,
DropdownModule,
GridModule,
HeaderModule,
SharedModule,
SidebarModule,
} from '@coreui/angular';
@xidedix What do you think? Do you need more info?
from coreui-angular.
@gaweCodes so we have to find out what the heck is r
... 😅
I bet you need to import BrowserAnimationsModule or provideAnimations
on ng modules:
in your app.module.ts
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
...
@NgModule({
imports: [
BrowserAnimationsModule,
...
or
on standalone components
in your main.ts
import { provideAnimations } from '@angular/platform-browser/animations';
...
bootstrapApplication(AppComponent, {
providers: [
provideAnimations()
...
],
}).catch((err) => console.error(err));
see the demo for the latter:
https://stackblitz.com/edit/stackblitz-coreui-accordion-7qsnt3-4237d6?file=src%2Fmain.ts
from coreui-angular.
Great suggestion @gaweCodes. We'll make sure to add these details to the docs.
from coreui-angular.
docs updated
from coreui-angular.
Related Issues (20)
- Daterangepicker Laggs HOT 4
- Angular v16 support HOT 4
- Changing color of icon
- Smart Table not updating the data. HOT 6
- Showing record count in smart table HOT 4
- Side Menu when clicked open to new tab HOT 1
- SidebarModule: Clicking on backdrop does not close sidebar on mobile view HOT 3
- Dynamic Nav json format for sidebar HOT 1
- Build Issue - version 15 in Github Action HOT 2
- Multi Select with fewer data HOT 4
- Hide manually check box for selectable enabled HOT 3
- Datepicker inside a modal that is in another modal. Datepicker not showing HOT 2
- Angular v17 support HOT 4
- Upgrade to angular 17 HOT 1
- [Blocker] IntersectionObserver is not definded HOT 1
- toaster doesn't fire visibleChange HOT 5
- RTL alignment issue in drop-down menu HOT 1
- Use of different Icons aside from Core UI Icons HOT 2
- During control flow migration a typo error was introduced on iconComponent check
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from coreui-angular.