I'm looking to setup a couple of angular bootstrap tooltips per https://ng-bootstrap.github.io/#/components/tooltip/examples.
I have a component for a contact-form which has the following:
import { Component, OnInit, Injectable, NgModule } from '#angular/core';
import { FormGroup, FormControl, Validators, FormArray, ReactiveFormsModule } from '#angular/forms';
import { HttpClient } from '#angular/common/http';
import { ApiHttpService } from '../services/api-http.service';
import { Constants } from '../config/constants';
import { Observable, OperatorFunction } from 'rxjs';
import { debounceTime, distinctUntilChanged, map } from 'rxjs/operators';
import { FormsModule } from '#angular/forms';
import { JsonPipe } from '#angular/common';
import { NgbTypeaheadModule, NgbTooltip } from '#ng-bootstrap/ng-bootstrap';
declare var bootstrap: any
#Component({
selector: 'app-contact-form',
templateUrl: './contact-form.component.html',
styleUrls: ['./contact-form.component.css'],
// standalone: true,
// imports: [NgbTypeaheadModule, FormsModule, JsonPipe, ReactiveFormsModule, NgbTooltipModule],
})
#Injectable()
export class ContactFormComponent implements OnInit {
constructor(private http: HttpClient, private apiHttpService:ApiHttpService) {}
contactForm: FormGroup;
ngOnInit() {
this.contactForm = new FormGroup({
'requestorData': new FormGroup({
'name': new FormControl(null, Validators.required),
'item': new FormControl(null, Validators.required),
'supplier': new FormControl(null,Validators.required),
// 'contact': new FormControl(null,Validators.required),
'budget': new FormControl(null,Validators.required),
'confidential': new FormControl(false),
'pii': new FormControl(false),
'cloud': new FormControl(false),
'intData': new FormControl(false),
'entCritical': new FormControl(false),
})
});
this.getVendorData()
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
}
)
}
And then in my contact-form.html file (the bottom of the form)
<span *ngIf="!contactForm.valid && contactForm.touched" class="help-block">Please fill in all the required fields!</span>
<button [disabled]="!contactForm.valid" class="btn btn-primary" type="submit">Submit</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">
Tooltip on bottom
</button>
The error I am getting in the browser is -
ERROR ReferenceError: bootstrap is not defined
at contact-form.component.ts:48:7
at Array.map (<anonymous>)
at ContactFormComponent.ngOnInit (contact-form.component.ts:47:42)
at callHook (core.mjs:2498:22)
at callHooks (core.mjs:2467:17)
at executeInitAndCheckHooks (core.mjs:2418:9)
at refreshView (core.mjs:11984:21)
at refreshComponent (core.mjs:13043:13)
at refreshChildComponents (core.mjs:11759:9)
at refreshView (core.mjs:12019:13)
Also, here is my app.ts which has the import
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { FormsModule, ReactiveFormsModule } from '#angular/forms';
import { HttpClientModule } from '#angular/common/http';
import { AppComponent } from './app.component';
import { ContactFormComponent } from './contact-form/contact-form.component';
import { JumbotronComponent } from './jumbotron/jumbotron.component';
import { FooterComponent } from './footer/footer.component';
import { NgbTypeaheadModule, NgbTooltipModule } from '#ng-bootstrap/ng-bootstrap';
import { JsonPipe } from '#angular/common';
import {NgbModule} from '#ng-bootstrap/ng-bootstrap';
#NgModule({
declarations: [
AppComponent,
ContactFormComponent,
JumbotronComponent,
FooterComponent
],
imports: [
BrowserModule,
ReactiveFormsModule,
HttpClientModule,
NgbTypeaheadModule,
FormsModule,
JsonPipe,
NgbTooltipModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Am I missing something with how I am initializing the tooltip in my .ts file?
Thanks
Related
The scenario:
I have a navigation component that navigates to either one of two components depending on which link is clicked. For the writeup component i display a gridlist with cards initially. When a card is clicked, the gridlist is exchanged by the show component shown through the router outlet of the writeupcomponent. All good so far but...
what i'm expecting to happen:
The user clicks that navigation button again and the gridlist of cards is shown again.
what actually happens:
Nothing is shown. The router outlet remains black after navigating to the writeup component again. When i click the other navigation button, hence loading the backlog component and then click the writeup navigation button again, the gridlist is loaded normally.
navbar-component.html:
<mat-toolbar class="navbar navbar-dark bg-dark">
<mat-icon>menu</mat-icon>
<ng-container *ngIf="loggedIn ==='false' || loggedIn === null">
<button routerLink="register" class="btn btn-outline-info mx-1" type="button">Register</button>
<button routerLink="login" class="btn btn-outline-info mx-1" type="button">Login</button>
</ng-container>
<ng-container class="logged-in" *ngIf="loggedIn === 'true'">
<div class="sub-menu-left">
<!--<button (click)="openDialog()" class="btn btn-outline-info mx-1" type="button">New Backlog Item</button> -->
<button (click)="navigate('dashboard/backlog')" class="btn btn-outline-info mx-1" type="button">Backlog</button>
<button (click)="navigate('dashboard/writeup')" class="btn btn-outline-info mx-1" type="button">Write-up</button>
</div>
<div class="sub-menu-right">
<button mat-mini-fab color="warn" aria-label="logout button with icon"
(click)="logout()" class="btn btn-outline-info mx-1" type="button">
<mat-icon>logout</mat-icon>
</button>
<app-profile [profile]="profile"></app-profile>
</div>
</ng-container>
</mat-toolbar>
<router-outlet></router-outlet>
navbar-component.ts:
import { Component, EventEmitter, OnInit, Output, ViewChild } from '#angular/core';
import { Router, ActivatedRoute, ParamMap } from '#angular/router';
#Component({
selector: 'app-navbar',
templateUrl: './navbar.component.html',
styleUrls: ['./navbar.component.scss']
})
export class NavbarComponent implements OnInit {
constructor(
private router: Router
){}
navigate(route:any) {
return this.router.navigate([route]);
}
}
writeup-component.html:
<router-outlet></router-outlet>
writeup-component.ts:
import { Component, OnInit} from '#angular/core';
import { Router } from '#angular/router';
#Component({
selector: 'app-write-up',
templateUrl: './write-up.component.html',
styleUrls: ['./write-up.component.scss']
})
export class WriteUpComponent implements OnInit {
constructor( private router: Router) { }
ngOnInit(): void {
this.router.navigate(['dashboard/writeup/index'])
}
}
index-component.ts:
import { Component, OnInit } from '#angular/core';
import { Router } from '#angular/router';
import { Writeup } from 'src/app/interfaces/writeup';
#Component({
selector: 'app-index',
templateUrl: './index.component.html',
styleUrls: ['./index.component.scss']
})
export class IndexComponent implements OnInit {
list: Writeup[] = [
{
id:1,
title:"title 1",
subTitle: "subtitle 1",
content: "some contnet",
link:"www.somelink.com"
},
{
id:2,
title:"title 1",
subTitle: "subtitle 1",
content: "some contnet",
link:"www.somelink.com"
},
{
id:3,
title:"title 1",
subTitle: "subtitle 1",
content: "some contnet",
link:"www.somelink.com"
}
]
constructor(private router:Router) { }
ngOnInit(): void {
}
showWriteUp(id:number) {
this.router.navigate(['dashboard/writeup/show'])
}
}
index-component.html:
<mat-grid-list class="writeup-grid-list" cols="3" gutterSize="10px">
<mat-grid-tile *ngFor="let writeup of list">
<mat-card (click)="showWriteUp(writeup.id)" class="writeup-card">
<mat-card-title>{{ writeup.title }}</mat-card-title>
<mat-card-subtitle>{{ writeup.subTitle }}</mat-card-subtitle>
<mat-card-content>
<p>{{ writeup.content }}</p>
</mat-card-content>
<mat-card-actions>
<button mat-button>{{ writeup.link }}</button>
</mat-card-actions>
</mat-card></mat-grid-tile>
</mat-grid-list>
app-routing.module.ts:
import { NgModule } from '#angular/core';
import { RouterModule, Routes } from '#angular/router';
...
import { WriteUpComponent } from './components/write-up/write-up.component';
import { BacklogComponent } from './components/backlog/backlog.component';
import { ShowComponent } from './components/writeup/show/show.component';
import { IndexComponent } from './components/writeup/index/index.component';
const routes: Routes = [
...
{ path: 'dashboard', component: DashboardComponent,canActivate: [AuthGuardGuard],
children: [
{ path: 'backlog', component: BacklogComponent },
{ path: 'writeup', component: WriteUpComponent,
children: [
{ path: 'index', component: IndexComponent },
{ path: 'show', component: ShowComponent }
]
},
]
}
];
#NgModule({
imports: [RouterModule.forRoot(routes,{onSameUrlNavigation: 'reload'})],
exports: [RouterModule]
})
export class AppRoutingModule { }
show-component is not implemented yet but 'it works'
After using this snippet as a route debug tool:
import { Component } from '#angular/core';
import { Router, Event, NavigationStart, NavigationEnd, NavigationError} from '#angular/router';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.sass']
})
export class AppComponent {
currentRoute: string;
constructor(private router: Router) {
this.currentRoute = "Demo";
this.router.events.subscribe((event: Event) => {
if (event instanceof NavigationEnd) {
this.currentRoute = event.url;
console.log(event);
}
});
}
}
i found the problem. Turned out i was being routed to dashboard/writeup instead of dashboard/writeup/index, i'm still not sure why it does work after loading another component. I think it has something to do with the writeup component not using the onInit method anymore. I removed the entire writeup component, just using path: 'writeup' in app-routing.module.ts. It was redundant :
{ path:'register', component: RegisterComponent},
{ path: 'login', component: LoginComponent },
{ path: 'dashboard', component: DashboardComponent,canActivate: [AuthGuardGuard],
children: [
{ path: 'backlog', component: BacklogComponent },
{ path: 'writeup',
children: [
{ path: 'index', component: IndexComponent },
{ path: 'show', component: ShowComponent }
]
},
]
}
];
I'm just learning angular and trying to make a to-do-list app. I'm trying to send array object data to firestore. I have an array object input like this:
[
{
"isChecked": true
"title": "Todo 1",
},
{
"isChecked": true,
"title": "Todo 2"
}
]
I want to enter that into the input field. And here is my input field:
<form action="" #importForm="ngForm (ngSubmit)="importJson(importForm, $event)">
<div class="form-group">
<textarea ngModel name="importjson" #importjson="ngModel" class="form-control" id="exampleFormControlTextarea1" rows="10" required></textarea>
</div>
<button type="submit" class="btn btn-secondary" >Ok</button>
</form>
And this is my app component :
import { Component, ViewChild, OnInit, ElementRef } from '#angular/core';
import { FormsModule } from '#angular/forms';
import { FormGroup } from '#angular/forms';
import { TodolistService } from '../../services/todolist.service';
import { Todolist } from '../../model/todolist.model';
export class TodolistComponent implements OnInit {
importjson: Todolist={};
constructor(private todolistService: TodolistService) { }
#ViewChild('editTitle', {static: false}) input: ElementRef;
ngOnInit(): void{
this.todolistService.getToDoList().subscribe(items => {
this.todos = items;
})
}
importJson(importForm: FormGroup, submit){
console.log(importForm.value.importjson);
this.todolistService.addImport(importForm.value.importjson);
this.importState = false;
}
}
And here is my app service:
import { Injectable } from '#angular/core';
import { AngularFireDatabase, AngularFireList } from '#angular/fire/database' ;
import { AngularFirestore, AngularFirestoreCollection, AngularFirestoreDocument } from '#angular/fire/firestore';
import { Observable } from 'rxjs';
import { Todolist } from '../model/todolist.model';
#Injectable({
providedIn: 'root'
})
export class TodolistService {
itemsCollection: AngularFirestoreCollection<Todolist>;
items: Observable<Todolist[]>;
itemDoc: AngularFirestoreDocument<Todolist>;
constructor(private firebasedb: AngularFireDatabase, public firestore: AngularFirestore) {
this.itemsCollection = this.firestore.collection('titles');
this.items = this.itemsCollection.snapshotChanges().pipe(
map(actions => actions.map(a => {
const data = a.payload.doc.data() as Todolist;
data.id = a.payload.doc.id;
return data;
}))
);
}
addImport(item: Todolist) {
this.itemsCollection.add(item);
}
How can I do that?
I am trying to make this demo work but somehow it is not working for me. It keeps giving me error
servers.component.ts
import { Component } from '#angular/core';
import {FormControl} from '#angular/forms';
import {Observable} from 'rxjs/Observable';
import {startWith} from 'rxjs/operators/startWith';
import {map} from 'rxjs/operators/map';
#Component({
selector: 'app-servers',
templateUrl: './servers.component.html',
styleUrls: ['./servers.component.css']
})
export class User {
constructor(public name: string) { }
}
export class ServersComponent {
myControl = new FormControl();
options = [
new User('Mary'),
new User('Shelley'),
new User('Igor')
];
filteredOptions: Observable<User[]>;
ngOnInit() {
this.filteredOptions = this.myControl.valueChanges
.pipe(
startWith<string | User>(''),
map(value => typeof value === 'string' ? value : value.name),
map(name => name ? this.filter(name) : this.options.slice())
);
}
filter(name: string): User[] {
return this.options.filter(option =>
option.name.toLowerCase().indexOf(name.toLowerCase()) === 0);
}
displayFn(user?: User): string | undefined {
return user ? user.name : undefined;
}
}
I have imported both User class and ServersComponent in app.module.ts.
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AlertModule } from 'ngx-bootstrap';
import "hammerjs";
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
import {MatButtonModule, MatInputModule } from '#angular/material';
import { FormsModule, ReactiveFormsModule } from '#angular/forms';
import { AppComponent } from './app.component';
import { ServerComponent } from './server/server.component';
import { ServersComponent, User } from './servers/servers.component';
import { MyFormComponent } from './my-form/my-form.component';
import {MatCheckboxModule} from '#angular/material/checkbox';
import {MatAutocompleteModule} from '#angular/material/autocomplete';
#NgModule({
declarations: [
AppComponent,
ServerComponent,
ServersComponent,
MyFormComponent,
User,
],
imports: [
BrowserModule,
BrowserAnimationsModule,
AlertModule.forRoot(),
FormsModule,
ReactiveFormsModule,
MatButtonModule,
MatInputModule,
MatCheckboxModule,
MatAutocompleteModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
However if i use this demo it is working fine.
Can you let me know what I am doing wrong in my code.
Problem lies in this line,
import { ServersComponent, User } from './servers/servers.component';
Usually you can have only one component from a select/component. Remove User from the same.
To add more on the issue, you should not export two classes from same component. change your component as,
import { Component } from '#angular/core';
import {FormControl} from '#angular/forms';
import {Observable} from 'rxjs/Observable';
import {startWith} from 'rxjs/operators/startWith';
import {map} from 'rxjs/operators/map';
#Component({
selector: 'app-servers',
templateUrl: './servers.component.html',
styleUrls: ['./servers.component.css']
})
export class ServersComponent {
myControl = new FormControl();
options = [
new User('Mary'),
new User('Shelley'),
new User('Igor')
];
filteredOptions: Observable<User[]>;
ngOnInit() {
this.filteredOptions = this.myControl.valueChanges
.pipe(
startWith<string | User>(''),
map(value => typeof value === 'string' ? value : value.name),
map(name => name ? this.filter(name) : this.options.slice())
);
}
filter(name: string): User[] {
return this.options.filter(option =>
option.name.toLowerCase().indexOf(name.toLowerCase()) === 0);
}
displayFn(user?: User): string | undefined {
return user ? user.name : undefined;
}
}
While creating a modal in ionic 2 I am facing this error:
Error in ./QuizmePage class QuizmePage - caused by:
self.context.MyModal is not a function
can anyone please tell me how to overcome this error.
My code follows:
quiz.html page
<ion-content padding>
<button ion-button (click)="MyModal()">Share</button>
quiz.ts
import { Component } from '#angular/core';
import {ModalController, NavController, NavParams } from 'ionic-angular';
import { AccModal } from './modal'
#Component({
selector: 'page-quiz',
templateUrl: 'quiz.html'
})
export class QuizPage {
constructor(public navCtrl: NavController, public navParams: NavParams , public modalCtrl: ModalController ) {
}
MyModal() {
let myModal = this.modalCtrl.create(AccModal);
myModal.present();
}
}
modal.ts
import { Component } from '#angular/core';
import { NavController, NavParams } from 'ionic-angular/index';
#Component ({
template: `
<ion-card class='popover'>
<ion-card-content>
Hello
</ion-card-content>
</ion-card>
`
})
export class AccModal {
private dumbData: number;
constructor(private params: NavParams) {
this.dumbData= 22;
}
}
This is the first component where i am pushing those things into array named items and i am trying to get it in the second component through service
import { Component } from '#angular/core';
import { FormBuilder, FormControl } from '#angular/forms';
import {AppService} from '../second/app.service';
import { Router } from '#angular/router';
import { Http,Response } from '#angular/http';
import { routing, appRoutingProviders } from '../app.route';
import { Validators } from '#angular/forms';
import {BrowserModule} from '#angular/platform-browser';
#Component({
selector: 'first-app',
templateUrl:"../app/src/component/first/app.firstpage.html"
})
export class FirstComponent
{
data:any;
public items=[];
public edited=false;
public city=false;
public dateCon=false;
inputForm: FormGroup;
Select: FormControl;
Selectt: FormControl;
dat:FormControl;
constructor(private appservice:AppService,builder: FormBuilder, router:Router)
{
this.appservice.getData().subscribe(res=>{this.data=res.json()});
console.log(this.data);
this.Select = new FormControl('', [
Validators.required
]);
this.Selectt = new FormControl('', [
Validators.required
]);
this.dat = new FormControl('', [
Validators.required
]);
this.inputForm = builder.group({
Select: this.Select,
Selectt: this.Selectt,
dat: this.dat
});
this.router=router;
this.appservice=appservice;
}
ngOnInit(){
this.appservice.getData()
}
onclick(a,b) {
console.log(this.data);
let sel1=this.inputForm.value.Select;
let sel2=this.inputForm.value.Selectt;
let sel3=this.inputForm.value.dat;
console.log(sel3);
console.log(sel1);
console.log(sel2);
console.log(this.data.bus.length);
for(let i=0;i<this.data.bus.length;i++){
if((this.data.bus[i].from==sel1)&&(this.data.bus[i].to==sel2))
{
this.items.push(this.data.bus[i]);
}
}
this.appservice.setData(this.items);
}
if((sel1!="")&&(sel2!="")&&(sel3!="")&&(sel1!=sel2))
{
this.router.navigate(['/sec-component']);
}
else if((sel1=="")&&(sel2=="")&&(sel3==""))
{
this.edited=true;
}
if((sel1==sel2)&&((sel1!="")&&(sel2!="")))
{
this.edited=false;
this.city=true;
}
else
{
this.city=false;
}
if(sel1!=sel2)
{
this.edited=false;
}
if(sel3=="")
{
this.dateCon=true;
}
else
{
this.dateCon=false;
}
}
}
This is the second component to which i am passing this array and i need to get that printed over there and each properties to be accessed rather than the entire stuff.
import { Component } from '#angular/core';
import {AppService} from '../first/first.service';
#Component({
template:
`
<h1>second component</h1>
<h1>second component</h1>
<p >{{myName}}</p>
`
})
export class SecondComponent {
constructor(private appservice: AppService)
{
this.appservice=appservice;
this.myName=appservice.getVal();
}
}
This is the service page where i am returning the values
import {Component, Injectable,Input,Output,EventEmitter} from '#angular/core'
import { Http, Response } from '#angular/http';
export interface myData
{
name:any;
}
#Injectable()
export class AppService
{
sharingData: myData={name:""};
constructor(private http:Http){ }
getData()
{
return this.http.get('./app/src/component/busDet.json')
}
setData(i)
{
console.log('save data function called' + i + this.sharingData.name);
this.sharingData.name=i;
console.log(this.sharingData.name);
}
getVal()
{
console.log(this.sharingData.name);
return this.sharingData.name;
}
}
I am getting the output as object.object
I am not able to get the values with in the JSON in the next component.