I am following the example given here https://valor-software.com/ng2-bootstrap/#/modals
But when i put the template in my html
<div class="modal fade" bsModal #staticModal="bs-modal" [config]="{backdrop: 'static'}"
tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
.........
.......
</div>
i also have below entry in my app.module.ts
import { ModalModule } from 'ng2-bootstrap';
#NgModule({
imports: [ModalModule.forRoot(),...]
})
and below message shows up, i am not sure what i am missing
EXCEPTION: Uncaught (in promise): Error: Template parse errors:
There is no directive with "exportAs" set to "bs-modal" ("
</p-dialog>
<div class="modal fade" bsModal [ERROR ->]#staticModal="bs-modal" [config]="{backdrop: 'static'}"
tabindex="-1" role="dialog" aria-labell"): PreCheckComponent#80:32
Can't bind to 'config' since it isn't a known property of 'div'. ("
</p-dialog>
according to guide i dont have to import anything to my component
You need to import ngx-bootstrap modal module on your module like below:
import { ModalModule } from "ngx-bootstrap";
#NgModule({
imports: [
ModalModule.forRoot()
]
})
You must be missing the below line in your component
#ViewChild('staticModal') public staticModal:ModalDirective;
For more information on ng2-bootstrap modal you can see this post which contains the demo as well.
Just incase if you are on this thread because you are getting same error even if you have added following line to NgModule
ModalModule.forRoot()
Make sure your import is the correct one.
Correct import
import { ModalModule } from 'ngx-bootstrap/modal';
Wrong import
import { ModalModule } from 'ngx-bootstrap/modal/public_api';
You are missing ModalDirective.
#ViewChild('yourModal') public YourModal:ModalDirective;
Related
I want my popover to contain HTML, so I have tried to do it in this way:
<ng-template #popContent>This is a pop content</b>!</ng-template>
<ng-template #popTitle>Fancy <b>content!!</b></ng-template>
<button type="button" [ngbPopover]="popContent" [popoverTitle]="popTitle">
My button
</button>
But I get this error:
Can't bind to 'ngbPopover' since it isn't a known property of 'button'.
I think it should work as it is from ng-bootstrap documentation: https://ng-bootstrap.github.io/#/components/popover/examples.
Can anyone help?
Looks like you have malformed HTML in the first ng-template. You're missing an opening <b>.
I put this in stackblitz and it ran fine:
<ng-template #popContent><b>This is a pop content</b>!</ng-template>
<ng-template #popTitle>Fancy <b>content!!</b></ng-template>
<button type="button" [ngbPopover]="popContent" [popoverTitle]="popTitle">
My button
</button>
Update:
I've installed a completely new Angular project with
ng new
I've added ng-bootstrap with ng add #ng-bootstrap/ng-bootstrap - this installed packages ng-bootstrap v9.1.3 and bootstrap v4.5.
I've replaced the boiler plate code in app.component.html which now looks like:
<router-outlet></router-outlet>
<ng-template #popContent><b>This is a pop content</b>!</ng-template>
<ng-template #popTitle>Fancy <b>content!!</b></ng-template>
<button type="button" [ngbPopover]="popContent" [popoverTitle]="popTitle">
My button
</button>
This is my app.module:
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NgbModule } from '#ng-bootstrap/ng-bootstrap';
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
NgbModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
So it doesn't look like anything to do with the code (once the invalid HTML is fixed).
Only the app.component.html and app.module.ts have been updated, can you share your versions of these?
Also, what versions of Angular etc are you running. Can you share package.json?
Thanks
I have the following Plunker that uses ui-router and Angular's 1.6x new component feature.
The state 'userRegister' becomes active then initialises the 'userRegister' component. This component injects a new <user-register/> into the <ui-view> then injects the HTML contents of the ng-template script block, which is all working fine.
The final DOM ends up being:
<ui-view class="ng-scope">
<user-register class="ng-scope ng-isolate-scope">
<h1 class="header">Create account</h1>
</user-register>
</ui-view>
However, I cannot find a way to add a CSS class selector to the <user-register/> tag.
e.g. using a class selector called .example I'd like to achieve the following:
<user-register class="example ng-scope ng-isolate-scope">...<user-register/>
Any ideas please?
Sure you could always wrap the template on a div and put the class there.
If don't want to do it, you can inject the $element and use the $postLink function to add the class you need:
.component('userRegister', {
templateUrl: '/views/user-register',
controller: function($element) {
this.$postLink = function() {
$element.addClass('example');
}
}
})
Here is the working plunker:
https://plnkr.co/edit/VuWu8L9VqrgJRGnxItY2?p=preview
Final DOM:
<user-register class="ng-scope ng-isolate-scope example">
<h1 class="header">Create account</h1>
</user-register>
I'm trying to follow a tutorial. This is a simple page which displays courses. I'm getting below error in console. Angular 2 dependency is "angular2": "2.0.0-beta.7". I have tried using '#' in stead of 'let'.
Can't bind to 'ngFor' since it isn't a known native property
("{{title}}
]*ngFor="let course for courses">
{{course}}
Module course.components.ts
import {Component} from 'angular2/core';
import {CoursesService} from './courses.service';
#Component({ selector:'courses',
template:`<h1>Courses</h1>
{{title}}
<ul>
<li *ngFor="let course for courses">
{{course}}
</li>
</ul>
`,
providers:[CoursesService]
})
export class CoursesComponent
{
title="The title of courses page";
courses;
constructor(coursesService:CoursesService)
{
this.courses = coursesService.getCourses();
}
}
Module course.service.ts
export class CoursesService
{
getCourses():string[]
{
return ["Course1","Course2","Course3"];
}
}
You missed for in front of courses:
<li *ngFor="let course of courses">
and import your service file correctly.
Also I have created a plunker for you at: http://plnkr.co/edit/ldpRkJLR89e6aF4McdQD?p=preview
Hope this help!
Angular 2 has a final release several weeks ago and you should update to this final version to catch the change and notes that in 2.0.0.beta.7 the # is not yet deprecated
I am trying to send data from one component to another using input attr.
but I am getting this error
VM575 zone.js#0.6.17?main=browser:484 Unhandled Promise rejection: Template parse errors:
Can't bind to 't' since it isn't a known property of 'row-item'.
1. If 'row-item' is an Angular component and it has 't' input, then verify that it is part of this module.
2. If 'row-item' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '#NgModule.schema' of this component to suppress this message.
(" <ul>
<li *ngFor="let tt of todoService.todos">
<row-item [ERROR ->][t]='tt'></row-item>
</li>
I added this in my demo
import {Component, Input} from "#angular/core";
#Component({
selector:'row-item',
template :`<div>
<span>{{t}}</span>
</div>`
})
export class TodoRow{
#Input t;
}
used like this
#Component({
selector: 'todo-list',
template: `<div>
<ul>
<li *ngFor="let tt of todoService.todos">
<row-item [t]='tt'></row-item>
</li>
</ul>
</div>`
})
here is my code
http://plnkr.co/edit/WXgdKF2gx9Kpj7eqmDJv?p=preview
Your declaration should be something like this:
#Input() t;
You forgot to add () while defining you input for the component.
import {Input} from '#angular/core';
Input() t;
You should try providing base name while providing input for the component:
#Input('t') t;
Hope this helps.
I'm using Ionic as an example for this, but I figure it's a general Angular 2 question.
page1.ts
import {Page} from 'ionic-angular';
#Page({
templateUrl: 'build/pages/page1/page1.html'
})
export class Page1 {
constructor() {
}
}
page1.html
<ion-navbar *navbar>
<ion-title>Tab 1</ion-title>
</ion-navbar>
<ion-content padding class="page1">
<ion-slides pager>
<ion-slide>
<h3>Thank you for choosing the Awesome App!</h3>
<p>
The number one app for everything awesome.
</p>
</ion-slide>
<ion-slide>
<h3>Using Awesome</h3>
<div id="list">
<h5>Just three steps:</h5>
<ol>
<li>Be awesome</li>
<li>Stay awesome</li>
<li>There is no step 3</li>
</ol>
</div>
</ion-slide>
<ion-slide>
<h3>Any questions?</h3>
</ion-slide>
</ion-slides>
</ion-content>
How do I programatically reference the ion-slides object from the constructor of the Page1 class?
I had assumed via some sort of #reference but I'm not sure of the syntax
If ion-slides is a component or a directive, and there is only one instance in the template, use #ViewChild:
#ViewChild(IonSlides) ionSlides:IonSlides;
This assumes the component class name is IonSlides.
this.ionSlides will not be available in the constructor. It will be available in lifecycle hook ngAfterViewInit(), as documented in the ViewChild API page:
ngAfterViewInit() {
console.log(this.ionSlides);
}
Yes, it's an angular question.You can use #ViewChild decorator to access child component. like:
#ViewChild(CountdownTimerComponent)
private _timerComponent:CountdownTimerComponent;
See the angular2 doc for the detail, not to hard.
https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#parent-to-view-child
PS. if you have more than on components in same type like Button, use
#ViewChildren(Button) buttons: QueryList<Button>;