Here is my code for navbar:
<nav mat-tab-nav-bar>
<a mat-tab-link
*ngFor="let link of navLinks"
[routerLink]="link.link"
routerLinkActive #rla="routerLinkActive"
[active]="rla.isActive">
</a>
</nav>
And component:
export class SettingsComponent implements OnInit {
navLinks: any[];
activeLinkIndex = -1;
constructor(private router: Router) {
this.navLinks = [
{
label: 'First',
link: 'syspref',
index: 0
}, {
label: 'Second',
link: 'userpref',
index: 1
}
];
}
ngOnInit(): void {
this.router.events.subscribe((res) => {
this.activeLinkIndex = this.navLinks.indexOf(this.navLinks.find(tab => tab.link === '.' + this.router.url));
});
}
}
It works fine except that I dont see labels. Any idea why?
Thanks
Found it. I was missing {{link.label}}:
<nav mat-tab-nav-bar>
<a mat-tab-link
*ngFor="let link of navLinks"
[routerLink]="link.link"
routerLinkActive #rla="routerLinkActive"
[active]="rla.isActive">{{link.label}}
</a>
</nav>
Related
Okay, so, i have this Post component and i want to pass the id to the postView component, and then from there to the postPage, the problem is whatever i pass it gives me undefined, as im new to vue i have been bashing my head about this a whole day and have no idea how to go around it.
Thanks in forward!
Post component:
<template>
<div class="mb-3">
<ul v-for="post in posts" :key="post.id">
<div #click="goToPost(post.id)" class="byPost card">
<li class="card-tittle">{{ post.headline }}</li>
<li class="card-text">{{ post.description }}</li>
</div>
</ul>
</div>
</template>
<script>
import axios from "axios";
export default {
props: ["endpoint"],
data() {
return {
posts: [],
};
},
methods: {
goToPost(id){
this.$router.push({ name: 'post', params: { id } });
}
},
mounted() {
axios
.get(this.endpoint)
.then((response) => (this.posts = response.data))
.catch((error) => console.log(error));
},
};
</script>
PostView component:
<template>
<div class="home">
<PostPage
:headline="post.headline"
:description="post.description"
:likes="post.likes"
:topic="post.topic"
/>
</div>
</template>
<script>
import PostPage from "#/components/pages/post-page.vue";
import axios from "axios";
export default {
name: "Post",
data() {
return {
id: this.$route.params.id,
post: {}
};
},
components: {
PostPage,
},
mounted(){
axios.get(`http://localhost:3000/api/project_pages/${this.id}`)
.then(response => (this.post = response.data))
.catch(error => console.log(error));
}
};
</script>
First started by making the axios call in the post component, didn't go as it will do a good backend call and give me 200ok, but when passed to the postView i would get undefined, if anyone can help im open to hear it!
<span class="headmain" style="cursor:pointer" (click)="modalshow(ratingImage,el.name+i,el)" >
hello</span>
How to get the value from span element in similar to formControlName?
Span element is in a form tag.
You can use #ViewChild / ElementRef.
HTML:
<span #mySpan (click)="handleClick()">
Hallo from span.
</span>
TS:
export class AppComponent {
#ViewChild("mySpan", { static: false }) mySpanRef: ElementRef;
public handleClick(): void {
const spanValue = this.mySpanRef.nativeElement.innerHTML;
console.log("Span-Value: ", spanValue);
}
}
Working stackblitz
I've created a site using the Angular Material schematic for a navbar which opens a sidebar when in responsive mode. I noticed that when running on the local dev server and using Chrome to emulate a handset it showed the sidenav as expected. Now that I've deployed to UAT and can browse from my phone, the sidenav doesn't show as I expect it to.
Oddly when using Chrome to emulate a phone, when switching it changes but when I reload the page I'm stuck with the sidenav not showing.
Here is my navbar.component.html
<mat-sidenav-container class="sidenav-container">
<mat-sidenav #drawer class="sidenav" fixedInViewport
[attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
[mode]="(isHandset$ | async) ? 'over' : 'side'"
[opened]="(isHandset$ | async) === false">
<mat-toolbar>Menu</mat-toolbar>
<mat-nav-list>
<a mat-list-item *ngFor="let link of navLinks"
routerLink="{{link.link}}" (click)="drawer.toggle()">{{link.label}}</a>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content>
<mat-toolbar color="primary">
<button
type="button"
aria-label="Toggle sidenav"
mat-icon-button
(click)="drawer.toggle()"
*ngIf="isHandset$ | async">
<mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
</button>
<span class="md-title">South Island Practice Management</span>
<nav>
<ul>
<li *ngFor="let link of navLinks">
<a routerLink="{{link.link}}" class="navlink">{{link.label}}</a>
</li>
</ul>
</nav>
</mat-toolbar>
<router-outlet></router-outlet>
</mat-sidenav-content>
</mat-sidenav-container>
And here is the navbar.component.ts
import { Component } from '#angular/core';
import { BreakpointObserver, Breakpoints } from '#angular/cdk/layout';
import { Observable } from 'rxjs';
import { map, share } from 'rxjs/operators';
#Component({
selector: 'app-navbar',
templateUrl: './navbar.component.html',
styleUrls: ['./navbar.component.css']
})
export class NavbarComponent {
isHandset$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Handset)
.pipe(
map(result => result.matches),
share()
);
constructor(private breakpointObserver: BreakpointObserver) {}
navLinks = [
{
label: 'Home',
link: '/home'
},
{
label: 'About Us',
link: '/aboutus'
},
{
label: 'Our Services',
link: '/services'
},
{
label: 'Contact Us',
link: '/contactus'
},
]
}
The site is currently live at https://sipm-b2ce5.firebaseapp.com
I'm at a bit of a loss having come over from Bootstrap where this sort of behaviour "Just Works™"
I used the ionic CLI to create an application.
ionic start myApp sidemenu
ionic platform add ios
ionic build ios
ionic emulate ios
I then proceeded to modify app.js to look like the following.
angular.module('starter', ['ionic', 'starter.controllers'])
.run(function ($ionicPlatform) {
$ionicPlatform.ready(function () {
if (window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if (window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}
});
})
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'templates/menu.html',
controller: 'AppCtrl'
})
.state('app.register', {
url: '/register',
views: {
'menuContent': {
templateUrl: 'templates/register.html',
controller: 'RegisterCtrl'
}
}
})
.state('app.snap', {
url: '/snap',
views: {
'menuContent': {
templateUrl: 'templates/snap.html',
controller: 'SnapCtrl'
}
}
})
.state('app.search', {
url: '/search',
views: {
'menuContent': {
templateUrl: 'templates/search.html',
controller: 'SearchCtrl'
}
}
})
.state('app.browse', {
url: '/browse',
views: {
'menuContent': {
templateUrl: 'templates/browse.html',
controller: 'BrowseCtrl'
}
}
});
$urlRouterProvider.otherwise('/app/snap');
});
I've modified controller.js to look like the following.
angular.module('starter.controllers', [])
.controller('AppCtrl', function($scope, $ionicModal, $timeout) {
$scope.loginData = {};
$ionicModal
.fromTemplateUrl('templates/login.html', { scope: $scope })
.then(function(modal) { $scope.modal = modal; });
$scope.closeLogin = function() {
$scope.modal.hide();
};
$scope.login = function() {
$scope.modal.show();
};
$scope.doLogin = function() {
console.log('Doing login', $scope.loginData);
$timeout(function() {
$scope.closeLogin();
}, 1000);
};
})
.controller('RegisterCtrl', function($scope) {
//TODO
})
.controller('SnapCtrl', function($scope, Camera) {
//TODO
})
.controller('SearchCtrl', function($scope) {
//TODO
})
.controller('BrowseCtrl', function($scope) {
//TODO
});
The services.js was modified as follows (mostly taken from http://learn.ionicframework.com/formulas/cordova-camera/).
angular.module('starter.services', [])
.factory('Camera', ['$q', function($q) {
return {
getPicture: function(options) {
var q = $q.defer();
navigator.camera.getPicture(function(result) {
q.resolve(result);
}, function(err) {
q.reject(err);
}, options);
return q.promoise;
}
}
}]);
My menu.html was modified as follows.
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-nav-bar class="bar-stable">
<ion-nav-back-button></ion-nav-back-button>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-header-bar class="bar-stable">
<h1 class="title">MyMenu</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item menu-close ng-click="login()">
<i class="icon ion-person"></i> Login
</ion-item>
<ion-item menu-close href="#/app/register">
<i class="icon ion-person-add"></i> Register
</ion-item>
<ion-item menu-close href="#/app/snap">
<i class="icon ion-camera"></i> Snap
</ion-item>
<ion-item menu-close href="#/app/search">
<i class="icon ion-search"></i> Search
</ion-item>
<ion-item menu-close href="#/app/browse">
<i class="icon ion-android-document"></i> Browse
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
When I run this in the iOS emulator, clicking on the login links menu item work (a modal shows up) always. However, clicking on the any other menu item only works for the first menu item clicked. For example, if I click register, then the register page shows up, but then clicking any other menu item doesn't work (the register page continues to show up). This behavior also shows up on the android emulator (ionic emulate android) and also the browser (ionic serve).
Any ideas on what I'm doing wrong here?
I'm using jQuery UI to create a "button" to a given html element. I'm using Knockout.js to generate the html element (foreach).
However, I can't find the way how to pass a parameter to the click event for knockout.js generated items. In the following example, the somewhat static sampleButton works, but not the itemButton items.
http://jsfiddle.net/patware/QVeVH/
function ViewModel() {
var self = this;
self.ping = 'pong';
self.items = ko.observableArray([
{ display: 'Cars', id: 1 },
{ display: 'Fruits', id: 2 },
{ display: 'Humans', id: 3 },
{ display: 'Software', id: 4 },
{ display: 'Movies', id: 5 },
]);
}
ko.applyBindings(new ViewModel());
$("#sampleButton").button().data('someData',101);
$("#sampleButton").click(function(e){
alert('clicked sample: [' + $(this).data('someData') + ']');
});
$(".itemButton").button().data('someData',$(this).id);
$(".itemButton").click(function(){
alert('clicked item: [' + $(this).attr('foo') + ']');
});
ping-<span data-bind="text: ping"></span>
<div id="sample">
<div id="sampleButton">
<h3>Sample Button</h3>
Click here too
</div>
</div>
<div data-bind="foreach: items">
<div class="itemButton" data-bind="foo: id">
<h3 data-bind="text:display"></h3>
</div>
</div>
Consider using ko.dataFor instead of applying data with jquery.
Working sample based on your example http://jsfiddle.net/QVeVH/6/
You can set everything up using a custom binding.
http://jsfiddle.net/jearles/QVeVH/7/