I want to add bootstarp-datepicker to my page (working in angular), I just simply followed the instructions from: https://valor-software.com/ngx-bootstrap/#/datepicker , It seems working until i open the date picker, cause only the 50% of it is visible, however I didn't add extra styling code to it.
Here is the import:
import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
import { BrowserAnimationsModule } from '#angular/platform-
browser/animations';
.
.
.
#NgModule({
imports: [
...
BsDatepickerModule.forRoot(),
BrowserAnimationsModule
...
]
})
And the Html file:
<div class="DatePicker1">
<input type="text"
placeholder="Datepicker"
class="form-control"
bsDatepicker>
</div>
How it looks
Related
I am following this example of using a material select field: https://material.angular.io/components/select/overview
I have this list in my ts file:
accessTypes: string[] = [
'New Employee', 'Rehire', 'New Provider', 'New Resident/Fellow', 'Transfer/Job Title Change',
'New Contractor/Vendor', 'New Student/Intern', 'Change to existing user'
];
I'm able to make a simple drop down list and get the value quite easily:
<select class="md-col-6 numberEight" [(ngModel)]="model.accessType">
<option *ngFor="let item of accessTypes" [value]="item">{{item}}</option>
</select>
But when I try to use the mat-select the css from the example is not applied and the list options appear all the way at the bottom of the screen:
<div class="question">
<div class="row">
<h5>8. Type of Access Request</h5><p class="required">*</p>
</div>
<div class="col-md-6">
<mat-form-field appearance="fill">
<mat-label>Access Types</mat-label>
<mat-select [(ngModel)]="model.accessType">
<mat-option *ngFor="let item of accessTypes" [value]="item">
{{item}}
</mat-option>
</mat-select>
</mat-form-field>
</div>
</div>
This is what it looks like:
And then all the way at the bottom of the page the list options appear:
There is no styling at all in my css file that affects anything in the select field. Class question has no styling and required just makes the * red.
Even when I do this in a completely new component with an html file including only:
<mat-form-field appearance="fill">
<mat-label>Access Types</mat-label>
<mat-select [(ngModel)]="this.accessTypes" placeholder="Choose...">
<mat-option *ngFor="let item of accessTypes" [value]="item">
{{item}}
</mat-option>
</mat-select>
</mat-form-field>
It behaves the same.
So why is this happening? Why does the list not appear as it does in the example ?Does the example exclude some styling that is necessary?
I found this similar question: Mat Select appears in the bottom of the page and tried adding #import "~#angular/material/prebuilt-themes/indigo-pink.css"; to the pages css file but this did not fix the problem.
I have
import {MatSelectModule} from '#angular/material/select';
import {BrowserAnimationsModule} from '#angular/platform-browser/animations';
I also am including in package.json:
"#ng-bootstrap/ng-bootstrap": "^9.1.0",
"bootstrap": "^4.5.0",
and in angular.json I include in styles:
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.css",
"src/styles.css"
],
and in scripts:
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/bootstrap/dist/js/bootstrap.js"
]
In my app module. Do I need anything else/are these wrong? Is the bootstrap I already have somehow affecting the style of the select list?
I can't share the entire html page because it makes the question too long, but if you need anything else please let me know.
You code seems to be working properly in my test project, and your imports look correct. You may have something overriding the material select styling, or something is missing in your angular material structure. The use of class="col-md-6" tells me that you are using some sort styling bootstrap framework?
Update:
I spun up a new project specifying .css only, and it looks like I was able to reproduce the issue. It appears that you are indeed missing the material theme structure. I added the #import "~#angular/material/prebuilt-themes/indigo-pink.css"; to the styles.css file and it fixed the problem.
styles.css file:
/* You can add global styles to this file, and also import other style files */
#import "~#angular/material/prebuilt-themes/indigo-pink.css";
html, body { height: 100%; }
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
I am trying to add a transition of 2 png into an png in the background, and be able to switch between different scenarios ( like living-room, dining-room etc). Once I click the element that select which area of the house I am choosing, the images gets fetched but because it takes some time to load, the transition doesn't happen and they just appear on top of the image on the background without transition smoothly from the side. I need a way to load the all the images once the route gets rendered, or maybe if you could give me another solution for the problem I'm happy to hear it.
This is the template
<template>
<div>
<div v-for="item in painting" :key="item.id" class="showroom">
<div class="setting">
<h1>{{ item.name }}</h1>
<h3>Choose a room:</h3>
<div v-for=" (room, idx) in rooms" :key="idx" id="roomSelection">
<img id="roomSelector" :src="room.roomview" #click="showRoom(room)">
<p>{{ room.name }}</p>
<br>
</div>
<p>Choose a wall color: <span id="colorPicker" :style="{backgroundColor: color}"><input type="color" id="base" v-model="color"></span></p>
<router-link to="/painting"><i class="fas fa-arrow-left"></i></router-link>
</div>
<div class="display">
<div :style="{backgroundColor: color}" class="wall">
<img :src="item.img">
</div>
<div class="forniture">
<transition name="slideIn">
<div v-for=" room in roomToShow" :key="room" class="setForniture">
<img class="left" :id="room.space1" :src="room.forniture1">
<img class="left" :id="room.space2" :src="room.forniture2">
</div>
</transition>
</div>
</div>
</div>
</div>
</template>
This is the script
<script>
import { mapGetters } from 'vuex'
import sofa from '../assets/sofa.png'
import lamp from '../assets/lamp.png'
import table from '../assets/table.png'
import cabinet from '../assets/cabinet.png'
import chair from '../assets/chair.png'
import sidetable from '../assets/sidetable.png'
import livingroom from '../assets/livingroom.png'
import diningroom from '../assets/diningroom.png'
import lounge from '../assets/lounge.png'
export default {
data(){
return{
color: '#243E36',
rooms: [
{ name: "lounge", space1: 'lounge1', space2: 'lounge2', forniture1: chair, forniture2:sidetable, roomview: lounge},
{ name: "livingroom" , space1: 'livingroom1', space2: 'livingroom2', forniture1:sofa, forniture2:lamp, roomview: livingroom },
{ name: "diningroom" , space1: 'diningroom1', space2: 'diningroom2', forniture1: table, forniture2: cabinet, roomview: diningroom }
],
roomToShow: [],
}
},
computed: {
...mapGetters([
'showPainting',
'forSale',
'painting'
]),
},
methods: {
showRoom(room) {
setTimeout( () => {
this.roomToShow.shift();
this.roomToShow.push(room);
}, 100)
}
}
</script>
The easiest way to solve this issue is to just hide the images with CSS but nevertheless load all from the beginning (render the elements). You can do that by dynamically adding a class to the currently visible image with :class="".
A more complex solution, which gives you also a callback for when the images are loaded, is to create a new Image() for all images and react to onload/onerror. Like this, you can load all the images in the beginning with JS abd without changing the HTML. Here is an example for this use case: How to create a JavaScript callback for knowing when an image is loaded?
I am working with bootstrap 4 and angular 7, I have the following element, which function is to hide/show a sidebar.
<a
class="app-sidebar__toggle"
href="#"
data-toggle="sidebar"
aria-label="Hide Sidebar"
></a>
The problem is when I enter to specific route, this reloads all page. These are my routes in app-routing.module.ts
const routes: Routes = [
{ path: 'home', component: HomeComponent },
{ path: 'catalogo/lista', component: CatalogoListaComponent },
{ path: '', redirectTo: 'home', pathMatch: 'full' }
];
So, if I enter to http://localhost:4200/home, the error will happen, but if I enter to any other route (my default empty route will redirect to /home), for example, http://localhost:4200 or http://localhost:4200/a_route_that_not_exists, I am redirected to /home (as expected), and the button that show/hide the sidebar works well.
I hope to be clear in my problem and I would like a lot you can help me.
EDIT: More code of my application...
This is my app.component.html:
<app-header></app-header>
<app-sidebar></app-sidebar>
<div class="app-content">
<app-title [titulo]="titulo" [icono]="icono [breadcrumbs]="breadcrumbs"></app-title>
<router-outlet></router-outlet>
</div>
This is my header.component.html (where I use the link to show/hide the sidebar):
<header class="app-header">
<a class="app-header__logo" href="index.html">Vali</a>
<!-- Sidebar toggle button-->
<a
class="app-sidebar__toggle"
href="#"
data-toggle="sidebar"
aria-label="Hide Sidebar"
></a>
<p>.... more html</p>
</header>
And this is my sidebar.component.html:
<div class="app-sidebar__overlay" data-toggle="sidebar"></div>
<aside class="app-sidebar">
<div class="app-sidebar__user">
<img
class="app-sidebar__user-avatar"
src="https://s3.amazonaws.com/uifaces/faces/twitter/jsa/48.jpg"
alt="User Image"
/>
<div>
<p class="app-sidebar__user-name">John Doe</p>
<p class="app-sidebar__user-designation">Frontend Developer</p>
</div>
</div>
<ul class="app-menu">
<li>
<a class="app-menu__item" [routerLink]="['/home']">
<i class="app-menu__icon fa fa-home"></i>
<span class="app-menu__label">Inicio</span>
</a>
</li>
more menu elements...
<ul>
</aside>
Generally a lot of the Popper/ JS elements in Bootstrap won't work out of the box in Angular; Angular provides a pretty solid way to handle elements like sidenavs.
Since the element you want to use to toggle the sidenav doesn't exist in the same component as the sidenav, you can set up a basic service that handles the sidenav state. To create your sidenav service (run in console in your project root):
ng g s sidenav
And then in the generated sidenav.service.ts:
import {Injectable} from '#angular/core';
import {BehaviorSubject} from 'rxjs';
#Injectable()
export class SidenavService {
public isOpen: boolean = false;
public toggleChange: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
constructor() {}
public toggle(): void {
this.isOpen = !this.isOpen;
this.toggleChange.next(this.isOpen);
}
}
In your header.component.html you can modify the clickable element that will show/ hide the sidebar:
<a
class="app-sidebar__toggle"
aria-label="Hide Sidebar"
(click)="toggleSidebar()"
></a>
In your header.component.ts file you can then set toggleSidebar() to run the toggle() function in the service you just set up:
import {SidenavService} from "[wherever your service is located]";
#Component({ /*...*/ })
export class HeaderComponent {
constructor(private sidenavService: SidenavService)
toggleSidebar(): void {
this.sidenavService.toggle();
}
}
You can then (in either your app component or sidebar component) set up reacting to the toggle:
//assuming you're in sidebar.component.ts
import {SidenavService} from "[wherever your service is located]";
import {OnInit, OnDestroy} from "#angular/core";
import {Subscription} from "rxjs";
#Component({ /*...*/ })
export class SidebarComponent implement OnInit, OnDestroy {
isOpen: boolean;
sidenavSubscription: Subscription;
constructor(private sidenavService: SidenavService) {}
ngOnInit() {
this.sidenavSubscription = this.sidenavService.toggleChange.subscribe(isOpenChange => {
this.isOpen = isOpenChange;
});
}
ngOnDestroy() {
this.sidenavSubscription.unsubscribe();
}
}
You can then use the isOpen variable in your sidebar component in different ways to control sidebar activity. Examples include using an [ngClass] directive:
<!--in your header component-->
<header [ngClass]={'active': isOpen, 'inactive': !isOpen} >
</header>
Or you can build in something using angular animations to animate the sidebar in and out (using ngIf and the :enter/ :leave transitions).
Currently I am using:
ng-bootstrap 1.0.0-alpha.24
angular/core 4.0.0
bootstrap 4.0.0-alpha.6
I wanted to ask if someone knows how to autoclose the datepicker
when the focus is lost or another datepicker is opened.
Also i wanted to now if it is possible to close the datepicker in the component code with typescript.
It would be nice if someone could provide a working plunker or a code snippet.
My actual implementation:
<div class="input-group">
<input class="rect-border full-width"
placeholder="YYMMDD"
[(ngModel)]="selectedDate"
ngbDatepicker
#datePickerInput="ngbDatepicker"
(keydown.arrowup)="incrementDate()"
(keydown.arrowdown)="decrementDate()"
(ngModelChange)="validate('modelChanged')"
(blur)="validate(null)"
[disabled]="disabled"
[ngClass]="{'input-required': required, 'normal-color': valid, 'picker-disabled': disabled}">
<div class="input-group-addon rect-border"
(click)="disabled ? true : datePickerInput.toggle()"
[ngClass]="{'picker-button-disabled': disabled}">
<img src="assets/img/calendar-icon.svg" class="datpickerToggle"/>
</div>
</div>
Plunker: ng-bootstrap team demo
I have searched a long time and I am also pretty new to angular and these things.
Thank you for your help!
Update:
Possible solution:
There were a lot of good solutions provided.
I also found out by myself that I could use the class NgbInputDatepicker
to close the datePicker (I always used NgbDatepicker, so it didn't work).
#ViewChild('datePickerInput') datePicker: NgbInputDatepicker;
this.datePicker.close();
you can open and close your datepicker from your html itself
for eg:
<div class="input-group">
<input class="rect-border full-width"
placeholder="YYMMDD"
[(ngModel)]="selectedDate"
ngbDatepicker
#datePickerInput="ngbDatepicker"
(keydown.arrowup)="incrementDate()"
(keydown.arrowdown)="decrementDate()"
(ngModelChange)="validate('modelChanged')"
(blur)="validate(null)"
[disabled]="disabled"
[ngClass]="{'input-required': required, 'normal-color': valid, 'picker-disabled': disabled}">
<div class="input-group-addon rect-border"
(click)="disabled ? true : datePickerInput.toggle()"
[ngClass]="{'picker-button-disabled': disabled}">
<img src="assets/img/calendar-icon.svg" class="datpickerToggle"/>
</div>
</div>
<div (click)="datePickerInput.open()"></div>
<span (click)="datePickerInput.close()"></span>
and also there are many functions which you can use in your html. some are close(), isOpen(), manualDateChange(), open(), toggle(), validate() etc. You can refer it in this plunkr http://plnkr.co/edit/G1b6fFrtVZwEz4lsou8n?p=preview
In typescript you can simply define a variable datepickerVisibility and then in your template use *ngIf to show or hide your datepicker component. Here is a demo code:
Template: <datepicker *ngIf="datepickerVisibility" [ngModel]="date"> </datepicker>
Component: private datepickerVisibility: boolean = false;
// Show the datepicker
showDatepicker() {
this.datepickerVisibility = true;
}
Edit:
Therefore you could use jQuery. Add the jQuery js into your index.html and in your typescript component use jQuery as follows:
declare let jQuery: any;
#Component({
moduleId: module.id,
selector: 'test',
templateUrl: 'template.html',
styleUrls: ['test.css'],
})
export class TestComponent {
constructor() {}
public toggleDatepicker() {
jQuery("#datepicker01").toggle();
}
}
And in your template file just add the id datepicker01 to your datepicker div
<div id="datepicker01" ...>
I was looking for a solution to this issue, but in a scenario where the datepicker is wrapped in a custom component and has to expose a function a parent component can call to toggle the datepicker. The answers provided are great and will work for most use case, but not mine, as I didn't want to add a jQuery dependency and calling toggle from the HTML isn't an option.
Here's how I solved it.
I added a ViewChild reference to the datepicker input in the *.component.ts file
#ViewChild('d', {static: true}) d;
that matches the datepicker identifier in the HTML file
<input (dateSelect)="dateSelected($event)" class="form-control" (focus)='d.toggle()' placeholder="yyyy-mm-dd" name="d"
[ngModelOptions]="{standalone: true}" [(ngModel)]="date" ngbDatepicker #d="ngbDatepicker">
and called the toggle function within a method exposed by the component
toggle() {
this.d.toggle();
}
That way, another component can call the toggle() function exposed by this component to toggle the datepicker like so:
In HTML
<app-custom-datepicker #date></app-custom-date-picker>
In .ts file
#ViewChild('date', {static: true}) date;
.
.
.
this.date.toggle();
I'm trying to implement Pikaday in Meteor React. I've searched through numerous solutions and I can't get any of them to work. As I understand it, this is supposed to work:
I installed pikaday as follows: npm install -- save react react-pikaday.
Below is my code - What am I doing wrong?
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Pikaday from 'react-pikaday';
export default class TestForm extends Component {
ComponentDidMount() {
new Pikaday({
field: ReactDOM.findDOMNode(this.refs.TestForm),
format: 'DD/MM/YYYY',
firstDay: 0,
minDate: new Date(new Date()),
maxDate: new Date('2050-12-31'),
yearRange: [2000,2050],
});
}
render() {
return(
<div>
<form>
<div className="row">
<div className="input-field col s6">
<input ref="TestForm" type="text" />
</div>
</div>
</form>
</div>
)
}
}
From the github page, there is a component that can be used:
<Pikaday value={date} onChange={this.handleChange} />
If you want to do the componentDidMount way, add an id to the div tag. and use document.getElementById('textId'); instead of using ReactDOM.
I also noticed a typo in ComponentDidMount() {. It should be componentDidMount (c - lowercase).