The following is the code of my .vue. swapping between div worked just fine and the transition fade works well too. but mode out-in not working at all. both elements were shown at the same time while transitioning.
EDIT##
Sorry that I am not familiar with fiddle. Please find the full code of my .vue below for your best reference.
<template>
<div>
<div class="col-md-3">
<namecard :shop="shop" :owner="user"></namecard>
</div>
<div class="col-md-9">
<div>
<ul class="nav nav-tabs shop-manage-tabs">
<li class="nav-item">
<a class="nav-link" :class="isActive == 'items' ? 'active' :''" #click.prevent="activateTab('items')">Items</a>
</li>
<li class="nav-item">
<a class="nav-link" :class="isActive == 'operaters' ? 'active' : ''" #click.prevent="activateTab('operaters')">Operaters</a>
</li>
<li class="nav-item">
<a class="nav-link" :class="isActive == 'info' ? 'active' : ''" #click.prevent="activateTab('info')">Info</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" :class="isActive == 'statistics' ? 'active' : ''">Statistics</a>
<div class="dropdown-menu">
<a class="dropdown-item" #click.prevent="activateTab('statistics')">Action</a>
<a class="dropdown-item" #click.prevent="activateTab('statistics')">Another action</a>
<a class="dropdown-item" #click.prevent="activateTab('statistics')">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" #click.prevent="activateTab('statistics')">Separated link</a>
</div>
</li>
</ul>
</div>
<transition-group name="fade" mode="out-in">
<div v-if="isActive == 'items'" key="items">
<div class="card" style="padding: 1rem">
<h1>Control Panel</h1>
<button type="button" class="btn btn-success" #click="addNewProduct = true">Add New Product</button>
<button type="button" class="btn btn-danger" #click="addNewProduct = true">Delete Product</button>
</div>
<add-new-product v-show="addNewProduct"></add-new-product>
<div class="card" style="padding: 1rem">
<item-card :productId="product.id" v-for="product in shop.products" :key="product"></item-card>
</div>
</div>
<div v-else-if="isActive == 'operaters'" key="operaters">
<div class="card" style="padding: 1rem">
<h1>Control Panel</h1>
<button type="button" class="btn btn-success" #click="addNewProductModal = true">Add Operator</button>
<button type="button" class="btn btn-danger" #click="addNewProductModal = true">Delete Operator</button>
</div>
<div class="card">operaters</div>
</div>
<div v-else-if="isActive == 'info'" class="card" key="info">
<div class="card">info</div>
</div>
<div v-else-if="isActive == 'statistics'" class="card" key="statistics">
<div class="card">statistics</div>
</div>
</transition-group>
</div>
</div>
</template>
<script>
import itemCard from './Item-card.vue'
import nameCard from '../Namecard.vue'
import addNewProduct from './Add-new-product.vue'
export default {
components:{
'item-card':itemCard,
'namecard':nameCard,
'add-new-product':addNewProduct,
},
data(){
return{
user:{},
shop:{},
isActive:'items',
addNewProduct:false,
}
},
props:[
],
created(){
this.getUserInfo()
},
mounted(){
},
methods:{
getUserInfo(){
var vm = this
vm.$http.get('/getAuthUser').then((response)=>{
vm.user = response.data
vm.$http.get('/getShop/'+vm.user.id).then((response)=>{
vm.shop = response.data.data.shop
})
})
},
activateTab(tab){
var vm = this
vm.isActive = tab
}
}
}
</script>
You need to give key attribute to each of the div to make the transition work smoothly. In your case I see an extra ', which might be an issue, try removing that.
Change
<div v-if="isActive == 'items'" key="'items'">
to
<div v-if="isActive == 'items'" key="items">
and similarly at other places as well.
Related
i am using angular powered bootstrap dropdown and here whenever i do enter key press in input, it always changes the dropdown value to first option.
DEMO LINK
HTML:
<div class="row mb-3 mt-3">
<div class="col">
<div ngbDropdown class="d-inline-block">
<button
type="button"
class="btn btn-outline-primary"
id="dropdownBasic1"
ngbDropdownToggle
>
{{ clickMessage }}
</button>
<div ngbDropdownMenu aria-labelledby="dropdownBasic1">
<button
ngbDropdownItem
class="nav-link"
href="#"
(click)="getText($event.target.innerText)"
>
Option 1
</button>
<button
ngbDropdownItem
class="nav-link"
href="#"
(click)="getText($event.target.innerText)"
>
Option 2
</button>
<button
ngbDropdownItem
class="nav-link"
href="#"
(click)="getText($event.target.innerText)"
>
Option 3
</button>
</div>
</div>
</div>
</div>
TS:
clickMessage = 'Choose an option';
getText(text) {
this.clickMessage = text;
}
The behaviour you are seeing is due to you have some buttons without any type attribute and by default the buttons in the form trigger the submit event.Add the type to the buttons in the dropdown and it should work.
<div ngbDropdownMenu aria-labelledby="dropdownBasic1">
<button
type="button"
ngbDropdownItem
class="nav-link"
href="#"
(click)="getText($event, $event.target.innerText)"
>
Option 1
</button>
<button
type="button"
ngbDropdownItem
class="nav-link"
href="#"
(click)="getText($event, $event.target.innerText)"
>
Option 2
</button>
<button
ngbDropdownItem
class="nav-link"
href="#"
(click)="getText($event, $event.target.innerText)"
>
Option 3
</button>
</div>
Add the following code to your ts file.
#HostListener('keydown', ['$event']) public onKeyDown(evt) {
if (evt.key === 'Enter') {
evt.preventDefault();
this.onSubmit();
}
}
I write it for you in the following stackblitz.
https://stackblitz.com/edit/angular12-bootstrap-skiant?file=src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.module.ts
This below code giving me runtime error. I just want the browser to go to top while the page is routed from footer link. It just stick to the bottom and need to scroll.
document.getElementsByClassName('homemenu').scrollTo(0, 0);
header.component.html
<header class="top-head homemenu" *ngIf="showMenu == 'home'">
<div class="container-fluid">
<div class="row" [ngClass]="{'justify-content-center': onlyLogo}">
<div class="col-3 lm-logo"><img src="/assets/images/lm-logo.svg"></div>
<div class="col-9" *ngIf="!onlyLogo">
<div class="d-flex justify-content-end">
<ul class="menu_wrap d-flex">
<ng-container *ngIf="homemenu; else individual_page">
<li>Home</li>
<li>Individuals</li>
<li>Corporate</li>
<li>Hiring Managers</li>
<li class="dropdown_menu"><a class="dropdown-toggle nav-link" [routerLink]="['/partners']" routerLinkActive="active" aria-expanded="true" data-toggle="dropdown">Partners</a>
<div class="dropdown-menu">
<div class="menu_item">
<img class="img-fluid" src="{{bitBucketUrl}}library/images/corporate/home/p-ico5.png">
<a href="javascript:void(0)" [routerLink]="['/partners/content-owners']" routerLinkActive="active" >Content Owner</a>
</div>
<div class="menu_item">
<img class="img-fluid" src="{{bitBucketUrl}}library/images/corporate/home/p-ico3.png">
<a href="javascript:void(0)" [routerLink]="['/partners/influencers']" routerLinkActive="active" >Influencers</a>
</div>
<div class="menu_item">
<img class="img-fluid" src="{{bitBucketUrl}}library/images/corporate/home/p-ico2.png">
<a href="javascript:void(0)" [routerLink]="['/partners/localmasters-for-startup']" routerLinkActive="active" >Localmasters for Startup</a>
</div>
<div class="menu_item">
<img class="img-fluid" src="{{bitBucketUrl}}library/images/corporate/home/p-ico4.png">
<a href="javascript:void(0)" [routerLink]="['/partners/customer-training-solutions']" routerLinkActive="active" >Customer Training Solutions</a>
</div>
<div class="menu_item">
<img class="img-fluid" src="{{bitBucketUrl}}library/images/corporate/home/p-ico1.png">
<a href="javascript:void(0)" [routerLink]="['/partners/solution-partner-program']" routerLinkActive="active" >Solution Partner Program</a>
</div>
</div>
</li>
</ng-container>
<ng-template #individual_page>
<li>Home</li>
<li>How It Works</li>
<li>Be a Mentor</li>
</ng-template>
</ul>
<button class="btn top-btn" [routerLink]="['/login']" type="button">Sign In</button>
<!-- (click)="showSiteMap = !showSiteMap" -->
</div>
</div>
</div>
</div>
</header>
The above code works as expeceted but leave a error as shown in screenshot.
getElementsByClassName returns HTMLCollection.
You have to specify the exact item within the HTMLCollection, that you want to use scrollTo on. Ex.:
document.getElementsByClassName('homemenu')[0].scrollTo(0, 0);
Or use more modern function to query html, like querySelector. Ex.:
document.querySelector('.homemenu').scrollTo(0, 0);
To updated question
As I can see, you have that class assigned to element, that is rendered by angular. Make sure to call this function only when angular has rendered this tag.
Also, if code works as expected, then you can just check for null value the element, to get rid of the error:
document.querySelector('.homemenu')?.scrollTo(0, 0);
document.querySelector('.homemenu').scrollTo({top : 0});
I have a problem with render component (courses), when i want click in case "undergraduate" but the componenent renders in the last tab panel... help me please!, any idea how solve this problem? thanks.
in the image have the issue render only in the last nav tab enter image description here
here my code
Html
<div id="ofert" class="row py-4">
<div class="col-md-4 mb-2">
<div class="row">
<div class="col-xs-12 col-md-12 p-0">
<ul class="nav nav-tabs flex-column nav-ga-pills" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" ##click.prevent="navClick" data-graduation="Undergraduate" id="home-tab" data-toggle="tab" href="#undergraduate" role="tab" aria-controls="home" aria-selected="true">undergraduate</a>
</li>
<li class="nav-item">
<a class="nav-link" ##click.prevent="navClick" data-graduation="Postgraduate" id="profile-tab" data-toggle="tab" href="#postgraduate" role="tab" aria-controls="profile" aria-selected="false">oosgraduate</a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-md-8">
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="undergraduate" role="tabpanel" aria-labelledby="home-tab">
<courses ref="courses" :static=`image`></courses>
</div >
<div class="tab-pane fade" id="postgraduate" role="tabpanel" aria-labelledby="profile-tab">
<courses ref="courses" :static=`image`></courses>
</div>
</div>
</div>
</div>
parent
import courses from '../components/microspecial/ofert.vue'
new Vue({
el: '#ofert',
components: { courses },
data() {
return {
graduationlevel: ''
}
},
methods: {
navClick(e) {
this.graduationlevel = e.currentTarget.dataset.graduation;
this.$refs.courses.showData(this.graduationlevel);
}
}
});
child
<template>
<div class="row bg-light">
<div v-for="item in courses" class="col-sm-12 col-md-6 p-4 border-bottom">
<div class="row ga-i-box-oferta">
<div class="col-md-12 mb-2 ga-tittle-oferta">
<h2>{{item.Name}}</h2>
</div>
<div class="d-none d-lg-block col-md-5">
<div><img class="border" :src="url +`/repository/microspecial/courses/` + item.Id + `.png`" alt="" width="130" /></div>
</div>
<div class="col-xs-12 col-lg-7 ga-i-box-oferta-info">
<i class="fas fa-barcode"></i><span>Snies: {{item.Snies}}</span><br>
<i class="fas fa-chalkboard-teacher"></i><span>{{item.MethodologyName}}</span><br />
<i class="fas fa-user-graduate"></i><span>{{item.Title}} </span>
<div class="ga-i-box-btn">
Más información <i class="fas fa-arrow-circle-right"></i>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: ['static'],
data() {
return {
courses: [],
url: this.static
}
},
methods: {
showData(graduationLevel) {
this.courses = [];
fetch(`/MicroSpecial/GetCourses?graduationLevel=${graduationLevel}`)
.then(respon => respon.json())
.then(response => {
this.courses = response;
})
.catch(response => {
})
}
}
}
</script>
After upgrading to Angular 5 I am facing this error:
ExpressionChangedAfterItHasBeenCheckedError: Expression has
changed after it was checked. Previous value: 'ngIf: undefined'.
Current value: 'ngIf: null'.
If I comment the below div structure the error is disappearing
<div *ngIf="sportsServ?.relatedsportssData" class="stars stars-default pinnedSection">
Any idea how to fix this?
<!-- language-all: lang-or-tag-here -->
<div class="playerpobUpBox playerWindow kPopupConfirmationBox" id="greaterAlertHeader">
<div class="row playerPopUpGridCollection playerPopUpContent lineHeightInputs">
<div class="playerContent"></div>
</div>
<div class="clearFloat"></div>
<div class="row playerPopUpFooter textAligncenterImp">
<button class="commonBtn" type="button" id="greaterAlertOKHeader">OK</button>
</div>
<div class="clearFloat"></div>
<div class="clearFloat"></div>
</div>
<progress-circle></progress-circle>
<div class="leftSlider toggleShow">
<div class="fixedLeftSlider">
<div class="leftSliderBox">
<div class="stars-group" id="accordion">
<div class="stars stars-default recentsportss">
<div class="stars-heading active">
<h4 class="stars-title">
<a data-toggle="collapse" href="#recentsportss" aria-expanded="true">
<i class="fa fa-angle-right starsCaret"></i>
{{recentsportss}}
</a>
<span>{{lastTenViewsportss}}</span>
</h4>
</div>
<div id="recentsportss" class="stars-collapse collapse in" aria-expanded="true">
<div class="stars-body">
<ul *ngFor="let item of recentsportssList; let k=index;">
<li class="recentList" (click)="opensports($event,item.sportsNo,item.packageName,item.pinnedFlag,item.originatingNetwork);$event.stopPropagation();" [class.active]="currentsportsId == item.sportsNo" *ngIf="k<20">
<span> {{item.packageName}}
<i id="pinToggle" class="recentsportssRightIcon" (click)="pinUnpin($event,item.sportsNo); $event.stopPropagation();"></i>
</span>
</li>
</ul>
</div>
</div>
</div>
<div class="stars stars-default pinnedSection">
<div class="stars-heading">
<h4 class="stars-title">
<a data-toggle="collapse" href="#pinnedSection" aria-expanded="true">
<i class="fa fa-angle-right starsCaret"></i>
{{pinnedsportss}} & {{titles}}
</a>
</h4>
</div>
<div id="pinnedSection" class="stars-collapse collapse in" aria-expanded="true">
<div class="stars-body pad0Imp">
<label class="pinnedsportsSubTitle">sportss</label>
<ul *ngFor="let item of pinnedsportssList; let i=index;">
<li class="recentList" (click)="opensports($event,item.sportsNo,item.packageName,item.pinnedFlag,item.originatingNetwork);$event.stopPropagation();" [class.active]="currentsportsId == item.sportsNo" *ngIf="i<20">
<span>{{item.packageName}}
<i id="pinToggle1" class="recentsportssRightIcon" (click)="pinUnpin1($event,item.sportsNo); $event.stopPropagation();"></i>
</span>
</li>
</ul>
<!--<ul>
<li>sports Number One<i class="recentsportssRightIcon"></i></li>
<li>sports Two<i class="recentsportssRightIcon"></i></li>
<li>sports Three<i class="recentsportssRightIcon"></i></li>
</ul>-->
<label class="pinnedsportsSubTitle borderTopTitle">Titles</label>
<ul *ngFor="let item of pinnedTitlesList;let k=index;">
<li class="recentList" (click)="navigateTitlePage($event,item.titleNo);$event.stopPropagation();" *ngIf="k<20">
<span>{{item.titleName}}
<i id="pinTitle1" class="recentsportssRightIcon" (click)="pinUnpintitle($event,item.titleNo);$event.stopPropagation();"></i>
</span>
</li>
<!--<li>Title Name Number One<i class="recentsportssRightIcon"></i></li>
<li>Title Name Number two<i class="recentsportssRightIcon"></i></li>
<li>Title Number 3<i class="recentsportssRightIcon"></i></li>-->
</ul>
</div>
</div>
</div>
<div *ngIf="sportsServ?.relatedsportssData" class="stars stars-default pinnedSection">
<div class="stars-heading">
<h4 class="stars-title">
<a data-toggle="collapse" href="#relatedsportss" aria-expanded="true">
<i class="fa fa-angle-right starsCaret"></i>
{{sportsServ?.relatedsportssHeading}}
</a>
</h4>
</div>
<div id="relatedsportss" class="stars-collapse collapse in" aria-expanded="true">
<div class="stars-body">
<ul>
<li *ngFor="let item of sportsServ?.relatedsportssData" (click)="selectedsports($event,item.sportsId,item.sportsName);$event.stopPropagation();" [class.active]="currentsportsId == item.sportsId">{{item.sportsName}}</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="showHideLeftSliderBtn"></div>
</div>
</div>
<router-outlet></router-outlet>
<!--<div><sportsSearch style="display:none;" (sportsSearchEmitter)="sportsSearchEmitter($event)"></sportsSearch></div>-->
Probably you're getting this value asynchronously, you may try to:
Use changeDetection: ChangeDetectionStrategy.OnPush on your #Component (before selector), in your .ts file, don't forget to import changeDetection from "#angular/core";
Try to not get the value asynchronously, using setTimeout() function to get the value;
Inject cdr: ChangeDetectorRef on your module and import it from your "#angular/core", after that, on your implemented ngAfterViewChecked just put this.cdr.detectchanges.
To provide a better answer, you need to post your .ts code, and remove some lines to make the code cleaner. Hope it helps!
How to create dropdown menu in AngularJs 2 Javascript?
I have watched alot of tutorials but there is only available for Typescript. i need it in Javascript. Please help.
(function(app) {
app.HeaderComponent = ng.core
.Component({
selector: 'header',
template:
`<nav class="navbar navbar-default">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="" class=" navbar-brand">
<span class="brandname">Slant<sub> AngulatJS</sub></span>
</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="dashboarddiv">
Dashboard
</li>
<li></li>
<li>
<div [hidden]="submitted">
<form (ngSubmit)="onSubmit()" #Header="ngForm">
<button type="submit" [disabled]="!Header.form.valid"><span class="glyphicon glyphicon-envelope"></span></button>
</form>
</div>
<div [hidden]="!submitted">
<button (click)="submitted=false"><span class="glyphicon glyphicon-envelope"></span></button>
<h2>You submitted</h2>
<div class="row">
<div class="col-xs-3">Name</div>
<div class="col-xs-9 pull-left">rrr</div>
</div>
<div class="row">
<div class="col-xs-3">Alter Ego</div>
<div class="col-xs-9 pull-left">r</div>
</div>
<div class="row">
<div class="col-xs-3">Power</div>
<div class="col-xs-9 pull-left">r</div>
</div>
</div>
</li>
</ul>
</div>
</nav>`
})
.Class({
constructor: function() {
this.submitted = false;
},
onSubmit: function() {
this.submitted = true;
},
});
})(window.app || (window.app = {}));
I have tried this. but it creates div hide and show. I want dropdown menu in navigation bar.
This is the result of this code