I am trying to display full-calendar module in ngx bootstrap tab teg but at the beginning I am getting only header after clicking header buttons it is displaying all calendar
I have tried to move assignment in ngOnInit but it didn't work
import {AfterViewInit, Component, OnInit} from '#angular/core';
import dayGridPlugin from "#fullcalendar/daygrid";
#Component({
selector: 'app-calendar-module',
templateUrl: './calendar-module.component.html',
styleUrls: ['./calendar-module.component.scss']
})
export class CalendarModuleComponent implements OnInit, AfterViewInit {
public calendarPlugins = [dayGridPlugin];
constructor() { }
ngOnInit() {
}
ngAfterViewInit(){
}
}
<full-calendar
defaultView="dayGridMonth"
[plugins]="calendarPlugins"
[weekends]="false"
[events]="[
{ title: 'event 1', start:'2019-08-19', end:'2019-08-30', color:'red' }
]"
></full-calendar>
Link to screenshot
this worked
ngOnInit() {
setTimeout(() => {
this.calendarComponent.getApi().render();
}, 300);
}
Related
I am learning building application using angular and asp.net core using these videos on this link. Everything works fine except the edit of a component. If I give a URL like below, it goes to the route for error in app-routing.module.ts even though there's no error in the browser console log.
http://localhost:4200/genres/edit/1
The app-routing.model.ts is as below
import { Component, NgModule } from '#angular/core';
import { RouterModule, Routes } from '#angular/router';
import { CreateActorComponent } from './actors/create-actor/create-actor.component';
import { EditActorComponent } from './actors/edit-actor/edit-actor.component';
import { IndexActorsComponent } from './actors/index-actors/index-actors.component';
import { CreateGenreComponent } from './genres/create-genre/create-genre.component';
import { EditGenreComponent } from './genres/edit-genre/edit-genre.component';
import { IndexGenresComponent } from './genres/index-genres/index-genres.component';
import { HomeComponent } from './home/home.component';
import { CreateMovieTheaterComponent } from './movie-theaters/create-movie-theater/create-movie-theater.component';
import { EditMovieTheaterComponent } from './movie-theaters/edit-movie-theater/edit-movie-theater.component';
import { IndexMovieTheaterComponent } from './movie-theaters/index-movie-theater/index-movie-theater.component';
import { CreateMovieComponent } from './movies/create-movie/create-movie.component';
import { EditMovieComponent } from './movies/edit-movie/edit-movie.component';
const routes: Routes = [
{path:' ', component:HomeComponent},
{path:'genres', component:IndexGenresComponent},
{path:'genres/create', component:CreateGenreComponent},
{path:'genres/edit:id', component:EditGenreComponent},
{path:'actors', component:IndexActorsComponent},
{path:'actors/create', component:CreateActorComponent},
{path:'actors/edit:id', component:EditActorComponent},
{path:'movietheaters', component:IndexMovieTheaterComponent},
{path:'movietheaters/create', component:CreateMovieTheaterComponent},
{path:'movietheaters/edit:id', component:EditMovieTheaterComponent},
{path:'movies/create', component:CreateMovieComponent},
{path:'movies/edit:id', component:EditMovieComponent},
// {path:'**',component:HomeComponent}
{path:'**',redirectTo:' '}
];
#NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
edit-genre.component.ts is
import { Component, OnInit } from '#angular/core';
import { ActivatedRoute } from '#angular/router';
import { genreCreationDTO } from '../genres.model';
#Component({
selector: 'app-edit-genre',
templateUrl: './edit-genre.component.html',
styleUrls: ['./edit-genre.component.css']
})
export class EditGenreComponent implements OnInit {
constructor(private activatedRoute:ActivatedRoute) { }
model: genreCreationDTO={name:"Drama"};
ngOnInit(): void {
this.activatedRoute.params.subscribe(params=>{
});
}
//Event emiited value passed from child form-genre-creation to parent create-genre.component
//to be displayed
saveChanges(genreCreationDTO:genreCreationDTO)
{
}
}
edit-genre.component.html is
<h2>Edit Genre</h2>
<app-form-genre [model]="model" (onSaveChanges)="saveChanges($event)"></app-form-genre>
form-genre.component.html is
<form (submit)="saveChanges()" [formGroup]="form">
<mat-form-field appearance="outline">
<mat-label>Name*</mat-label>
<input matInput formControlName="name">
<mat-error *ngIf="form.invalid">{{getErrorMessageFieldName()}}</mat-error>
</mat-form-field>
<div>
<button mat-flat-button color="primary" [disabled]="form.invalid">Save Changes</button>
<a mat-stroked-button routerLink="/genres">Cancel</a>
</div>
form-genre.component.ts is
import { Component, OnInit, Output,EventEmitter, Input } from '#angular/core';
import { FormBuilder, FormGroup, Validators } from '#angular/forms';
import { Router } from '#angular/router';
import { firstLetterUppercase } from 'src/app/validators/firstLetterUppercase';
import { genreCreationDTO } from '../genres.model';
#Component({
selector: 'app-form-genre',
templateUrl: './form-genre.component.html',
styleUrls: ['./form-genre.component.css']
})
export class FormGenreComponent implements OnInit {
constructor(private router: Router, private formBuilder:FormBuilder) { }
#Input()
model!: genreCreationDTO;
//Event Emitter
#Output()
onSaveChanges: EventEmitter<genreCreationDTO>=new EventEmitter<genreCreationDTO>();
form!: FormGroup;
ngOnInit(): void {
this.form= this.formBuilder.group({
name:['',[Validators.required, Validators.minLength(3),firstLetterUppercase()]]
});
if(this.model!==undefined){
this.form.patchValue(this.model);
}
}
getErrorMessageFieldName()
{
const field= this.form.get("name");
if(field?.hasError("required"))
{
return "The name field is required";
}
if(field?.hasError("minLength")){
return "The minimum length is 3"
}
if(field?.hasError('firstLetterUppercase')){
return field.getError('firstLetterUppercase').message;
}
return '';
}
saveChanges()
{
//Emit value from child form-genre.compnent to parent create-genre.component
this.onSaveChanges.emit(this.form.value);
// this.router.navigate(['/genres']);
}
}
I am new to .net core framework & angular and i'm using forms(chapter sharing forms) in the video tutorial by Felipe galivan. Everytime I give an edit/id url for a component, it keeps using this
{path:'**',redirectTo:' '}
in the app-routing.module.ts as if say genres/edit/id has no match. I'm doing exactly as Felipe in the video, mine keeps redirecting me to home page instead of genres/edit. Why is this happening?
I am creating a button and assigning class in component.ts. Style of css does not apply on the button (button font color doest not change). Code of component.ts is
let button = document.createElement('button');
button.innerHTML = 'North';
button.setAttribute('class', 'btn');
let element = document.createElement('div');
element.appendChild(button);
and component.css is
.btn
{
color: red;
}
please try this
button.classList.add("btn");
Use angular components for create buttons
#Component({
selector: 'my-app',
templateUrl: '',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
#ViewChild('element', { read: ViewContainerRef }) container: ViewContainerRef;
constructor(
private _componentFactoryResolver: ComponentFactoryResolver,
private _injector: Injector,
) {}
addButton(): void {
const [componentRef, componentInstance] = this._createButton();
componentInstance.title = 'North'
componentInstance.class = 'active'
this.container.insert(componentRef.hostView);
}
private _createButton(): [ComponentRef<ButtonComponent>, ButtonComponent] {
const componentFactory = this._componentFactoryResolver.resolveComponentFactory(ButtonComponent);
const componentRef = componentFactory.create(this._injector)
const componentInstance = componentRef.instance;
return [componentRef ,componentInstance];
}
}
button component
#Component({
selector: 'app-button',
templateUrl: './button.component.html',
styleUrls: ['./button.component.css'],
})
export class ButtonComponent {
#Input() title: string;
#Input() class: string = '';
}
I put the whole example on stackblitz
I am trying to use formControlName inside a Kendo Text Area, and have a outer component apply it.
Using the following code base link, its still not working.
Angular 2 - formControlName inside component
How would someone fix this?
InputText.ts
export class InputTextComponent implements AfterViewInit, ControlValueAccessor {
#Input() disabled: boolean;
#Output() saveValue = new EventEmitter();
value: string;
onChange: () => void;
onTouched: () => void;
writeValue(value: any) {
this.value = value ? value : "";
}
registerOnChange(fn: any) {this.onChange = fn}
registerOnTouched(fn: any) {this.onTouched = fn}
setDisabledState(isDisabled) {this.disabled = isDisabled}
}
InputText.html
<input kendoTextBox />
Not sure this is what you are asking but in order to use formControlName inside a custom component here is what you do
app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppComponent } from './app.component';
import { FormsModule, ReactiveFormsModule } from '#angular/forms';
import { InputTextComponent } from './input-text';
#NgModule({
declarations: [
AppComponent,
InputTextComponent
],
imports: [
FormsModule,
ReactiveFormsModule,
BrowserModule,
],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component.html
<form [formGroup]="details">
<input-text formControlName="name"></input-text>
<!-- This should show the name as you change it in your custom control -->
{{details.value | json}}
</form>
app.component.ts
import { Component } from '#angular/core';
import { FormGroup, FormControl } from '#angular/forms';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
public details: FormGroup;
constructor(
) {
this.details = new FormGroup({
name: new FormControl("name")
});
}
}
input-text.component.html
<input kendoTextBox [(ngModel)]="value" (ngModelChange)="onChange($event)" />
input-text.component.ts
import { Component, forwardRef } from "#angular/core";
import { NG_VALUE_ACCESSOR, ControlValueAccessor } from "#angular/forms";
#Component({
selector: "input-text",
templateUrl: "./input-text.html",
styleUrls: ["./input-text.scss"],
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => InputTextComponent),
multi: true
}
]
})
export class InputTextComponent implements ControlValueAccessor {
public value: string;
propagateChange = (value: string) => {};
writeValue(obj: any): void {
this.value = obj;
}
registerOnTouched(fn: any): void {}
registerOnChange(fn) {
this.propagateChange = fn;
}
onChange(newValue){
this.propagateChange(newValue);
}
}
i have an angular 6 application, and a different web application inside in an iframe.
when i receive message from the iframe with the postmessage function, i do get to
the onMessage function, and then i do get to the openOffNet - but then the popup doesnt work.
it doesnt work when i activate the popup from a button.
anyone have any idea why it does not work?
thank you
import {HostListener, Component, OnInit } from '#angular/core';
import {NgbModal, NgbActiveModal} from '#ng-bootstrap/ng-bootstrap';
import {NgbdModalContentComponent} from '../ngbd-modal-content/ngbd-modal-content.component';
import {ModalAddDeviceComponent} from '../popupBoxes/modal-add-device/modal-add-device.component';
import {ModalAddOffnetComponent} from '../popupBoxes/modal-add-offnet/modal-add-offnet.component';
#Component({
selector: 'app-top-bar',
templateUrl: './top-bar.component.html',
styleUrls: ['./top-bar.component.css']
})
export class TopBarComponent implements OnInit {
constructor(private modalService: NgbModal) {
(<any>window).onMessage= this.onMessage.bind(this);
}
ngOnInit() {
}
#HostListener('window:message', ['$event'])
onMessage(e) {
console.log('HostListener');
if(e.data.function == 'subnetworkClicked'){
}
else{
console.log("open popUp");
this.openOffNet();
}
}
openOffNet () : void {
const modalRef = this.modalService.open(ModalAddOffnetComponent);
}
}
Try 'document:message' instead of 'window:message'
I'm playing with angular2 and meteor (i'm new with both) and i'd like to change route if i can find a certain document in a collection. I read in the Angular 2 Meteor tutorial that the class MeteorComponent has methods subscribe and autorun so i'm trying to use this methods to get the job done (not sure if this is the best way to do it - i didn't remove autopublish).
But right now it isn't working.
My component is:
import {View, OnInit, Component} from 'angular2/core'
import {MeteorComponent} from 'angular2-meteor'
import {Navbar} from 'client/navbar/navbar'
import {FakePlayground} from 'client/intro/fake-playground/fake-playground'
import {PlayerList} from 'client/player-list/player-list'
import {PlayerService} from 'client/player/player-service'
import {Player} from 'client/player/player'
import {ProtectedDirective} from 'client/directives/protected-directive'
import {SentInvitation} from 'client/invitation/sent-invitation'
import {ReceivedInvitation} from 'client/invitation/received-invitation'
import {Invitations} from 'lib/invitations'
import {Router} from 'angular2/router'
#Component({
selector: 'intro'
})
#View({
templateUrl: 'client/intro/intro.html',
directives: [
Navbar,
PlayerList,
FakePlayground,
ProtectedDirective,
SentInvitation,
ReceivedInvitation
]
})
export class Intro extends MeteorComponent implements OnInit {
currentPlayer: Player
invitation: Mongo.Cursor<Object>
constructor(
public playerService: PlayerService,
private _router:Router
) {
super()
}
getInvitation() {
this.subscribe('invitations', () => {
this.invitation = Invitations.find({$or: [
{$and: [
{"sender._id": this.currentPlayer._id},
{status: 1}
]},
{$and: [
{"recipient._id": this.currentPlayer._id},
{status: 1}
]}
]})
this.autorun(() => {
console.log('autorun')
if(this.invitation){
console.log('game started')
this._router.navigate(['Game'])
}
})
})
}
getPlayer() {
this.currentPlayer = this.playerService.getCurrentPlayer()
}
ngOnInit() {
this.getPlayer()
this.getInvitation()
}
}
And in my fantasy getInvitation() called in ngOnInit should subscribe to
'invitations' collection and autorun() should check if the document is found and if it's found should change route.
But i'm not getting errors neither the route change.
Which should be the right way to change the route reactively to collection change?
Well, i was using this.autorun() the worng way.
It was much simpler:
import {View, OnInit, Component} from 'angular2/core'
import {MeteorComponent} from 'angular2-meteor'
import {Navbar} from 'client/navbar/navbar'
import {FakePlayground} from 'client/intro/fake-playground/fake-playground'
import {PlayerList} from 'client/player-list/player-list'
import {PlayerService} from 'client/player/player-service'
import {Player} from 'client/player/player'
import {ProtectedDirective} from 'client/directives/protected-directive'
import {SentInvitation} from 'client/invitation/sent-invitation'
import {ReceivedInvitation} from 'client/invitation/received-invitation'
import {Invitations} from 'lib/invitations'
import {Router} from 'angular2/router'
#Component({
selector: 'intro'
})
#View({
templateUrl: 'client/intro/intro.html',
directives: [
Navbar,
PlayerList,
FakePlayground,
ProtectedDirective,
SentInvitation,
ReceivedInvitation
]
})
export class Intro extends MeteorComponent implements OnInit {
currentPlayer: Player
constructor(
public playerService: PlayerService,
private _router:Router
) {
super()
}
getPlayer() {
this.currentPlayer = this.playerService.getCurrentPlayer()
}
ngOnInit() {
this.getPlayer()
this.autorun(() => {
if (Invitations.findOne({
$or: [
{$and: [{"sender._id": this.currentPlayer._id},{status: 1}]},
{$and: [{"recipient._id": this.currentPlayer._id},{status: 1}]}
]
})) {
this._router.navigate(['Game'])
}
})
}
}