Develop Reference

Understanding how slots works - 'v-slot' directive must be owned by a custom element

I'm building a page where the user can expend categories like an accordion.
I've been helped so for and I'm still trying to dismiss the fog here.
I'm having this issue with my slots :
'v-slot' directive must be owned by a custom element, but 'div' is not.
I've been checking the doc, but I can't seem to understand much...
<div v-for="(filteredArticles, categoryKey) in groupedCategories" :key="categoryKey" class="l">
<Item>
<template #title>
<a> {{ categoryKey }} </a>
</template>
<div v-for="article in filteredArticles" :key="article.slug">
<template #content> <!-- here is the issue -->
<p> bonjour monde</p>
<img :src="require(`assets/${article.img}`)" alt="">
</template>
</div>
</Item>
</div>
I've nested the template #content inside a div in order to dynamically fetch from an array.
Here is Item.vue
<template>
<div class="wrapper">
<div
:class="{ active: isActive }"
#click="toggle"
>
<a class="title">
<slot name="title" />
</a>
<div v-show="show" :class="{ active: isActive }" class="content">
<slot name="content" />
</div>
</div>
</div>
</template>

How to set the default indicator for PrimeNG carousel?

I have implemented a carousel using PrimeNG in angular which looks like this:
On page load the carousel is loaded with its last slide. I want the carousel to get loaded with the first slide by default. Also, notice the indicators at the bottom. The indicator is not highlighted on page load. It only gets highlighted when I click on indicators or the left arrow carousel navigation button. It does not work with the right button.
How do I solve these issues? Is this a bug or library issue?
PrimeNG Documentation - https://www.primefaces.org/primeng/carousel
My code:
<p-carousel
[value]="planDetails"
styleClass="custom-carousel"
[numVisible]="3"
[numScroll]="1"
[circular]="true"
[autoplayInterval]="4000"
>
<ng-template let-plan pTemplate="item">
<div class="centered-div">
<div class="plans">
<div class="card plan-card">
<div class="card-content">
<div class="plan-name">{{ plan?.planName }}</div>
<div class="plan-desc">
{{ plan?.description }}
</div>
<div class="plan-price">
<span class="plan-cost"
>$ {{ plan?.pricePerUser }}
<span>
<sup class="plan-currency">{{ plan?.currency }}</sup>
</span></span
>
</div>
<div class="billing-way">per user billed annually</div>
<div class="plan-upgrade-div centered-div">
<button
type="button"
class="remediator-blue-btn upgrade-btn centered-div"
>
<span class="button-text" (click)="onUpgrade(plan)">
Select
</span>
</button>
</div>
<hr />
<div class="plan-features">Features</div>
<div
class="plan-feature-1"
*ngFor="let planfeature of plan.planFeatures"
>
<img
src="assets/images/orange-check.svg"
alt=""
class="feature-check"
/>
<span class="feature-text">{{ planfeature }}</span>
</div>
</div>
</div>
</div>
</div>
</ng-template>
</p-carousel>
SOLUTION: I change the numScroll to 3 and circular to false and my issue was solved

How to add two sidenav in page with Angular?

I am creating a page with Angular, using Angular-Material where I must place two sidenav, one on the left where some user data is shown and another on the right with a menu of options, an image of what I have so far:
The part of the white box is where the user data would go and to the right is where I want the options menu to be seen, which is the red box, although I already add the two sidenav the problem is that I cannot see the one on the right and that when pressing the button it expands to the left as in this example:
https://stackblitz.com/edit/angular-bqgztk?file=src%2Fapp%2Fminivariant.component.html
Although in this example the options menu handles it from the left, here is the code I'm working on:
home.component.html
<mat-sidenav-container fullscreen>
<mat-sidenav mode="side" #sidenav opened position="start">
<mat-toolbar color="primary" class="mat-elevation-z4">
</mat-toolbar>
</mat-sidenav>
<mat-sidenav-content style="z-index: unset;overflow: hidden;">
<mat-toolbar>
<button mat-icon-button (click)="sidenav.toggle()">
<mat-icon>menu</mat-icon>
</button>
<span class="toolbar-spacer"></span>
<label class="label">2719872</label>
<mat-icon class="menu" (click)="isExpanded = !isExpanded">menu</mat-icon>
</mat-toolbar>
<mat-sidenav-container class="example-sidenav-container" autosize>
<mat-sidenav #sidenav2 position="end" class="example-sidenav" mode="side" opened="true">
<mat-nav-list class="dashboard">
<a mat-list-item (click)="toggleActive($event)">
<mat-icon mat-list-icon>description</mat-icon>
<p matLine *ngIf="isExpanded">Documentación</p>
</a>
<a mat-list-item (click)="toggleActive($event)">
<mat-icon mat-list-icon>video_label</mat-icon>
<p matLine *ngIf="isExpanded">Tutoriales</p>
</a>
<a mat-list-item (click)="toggleActive($event)">
<mat-icon mat-list-icon>contact_support</mat-icon>
<p matLine *ngIf="isExpanded">Contáctenos</p>
</a>
<a mat-list-item (click)="toggleActive($event)">
<mat-icon mat-list-icon>logout</mat-icon>
<p matLine *ngIf="isExpanded">Salir</p>
</a>
</mat-nav-list>
</mat-sidenav>
</mat-sidenav-container>
<div class="main-content">
<p>
Hi
</p>
</div>
<router-outlet></router-outlet>
</mat-sidenav-content>

The structure in not right. You should have one container and then use position attribute to align them.
<mat-sidenav-container class="example-container">
<mat-sidenav opened mode="side" opened="true">Start content</mat-sidenav>
<mat-sidenav opened mode="side" position="end" opened="true">End content</mat-sidenav>
Main content
</mat-sidenav-container>
Demo

editing fields, does not validate when inside a bootstrap accordion. Angular.js

I'm using the xeditable library.
https://vitalets.github.io/angular-xeditable/
When I try to edit a value in which I use this directive, I can do it since it is not inside the accordion, but if this is inside the accordion, the fields are not edited. Why does this happen?
https://plnkr.co/edit/s0y46xLFOhbGA3erGxJO?p=preview
<div ng-controller="AccordionDemoCtrl">
<a href="#" editable-text="user.name" onbeforesave="checkName($data)">
{{ user.name || 'empty' }}
</a> <!- wORKS HERE-->
<uib-accordion>
<div uib-accordion-group class="panel-default" is-open="status.open">
<uib-accordion-heading>
<a href="#" editable-text="user.name" onbeforesave="checkName($data)">
{{ user.name || 'empty' }}
</a> <!- NOT wORKS HERE-->
<span ng-click="ignoreClick($event);">
Text accordion
<button ng-click="setMessage();">
Click me
</button>
</span>
<i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i>
</uib-accordion-heading>
Some stuff
</div>
</uib-accordion>
{{ message }}
</div>

How to change accordion template by ng-click in AngularJS

I am now developing AngularJS based web application and have trouble to realize this.
Please see this image.
As you can see here, I need to display utterly different template when I click any item on accordion.
<accordion close-others="true" >
<accordion-group is-open="isopen"
ng-repeat="account in vm.accounts"
ng-controller="AccountController">
<accordion-heading>
<div class="row" ng-click="templateChange({{isopen}})">
<div class="col-md-4">
<i class="pull-right glyphicon"
ng-class="{'glyphicon-chevron-up': isopen, 'glyphicon-chevron-down': !isopen}"></i>
{{ ::account.name }}
</div>
<div class="col-md-3 pull-right">
<p class="text-uppercase">Balance</p>
${{ ::account.balance }}
<p class="text-uppercase">Annual Return</p>
{{ ::account.annualReturn }}%
</div>
<div class="col-md-5">
</div>
</div>
</accordion-heading>
</accordion-group>
And this is the controller part but still empty.
function AccountController($scope) {
$scope.templateChange = function(isOpen){
// Here, I hope to know what should I wrote to use another templatge
}
}
So, I hope to know how to change the template of individual accordion-group when I click it to expand or collapse.
Please help me!!!