<modal #modal id="modalwindow">
<modal-header [show-close]="true">
Add New School Admin
and i am getting an error:
If 'modal-header' is an Angular component and it has 'show-close' input, then verify that it is part of this module.
If 'modal-header' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '#NgModule.schemas' of this component to suppress this message.
To allow any property add 'NO_ERRORS_SCHEMA' to the '#NgModule.schemas' of this component. ("
][show-close]="true">
Add New School Admin
"): ng:///AddNewSchoolModule/addSchoolInfo.html#102:18
'modal-header' is not a known element:
If 'modal-header' is an Angular component, then verify that it is part of this module.
If 'modal-header' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '#NgModule.schemas' of this component to suppress this message. ("
[ERROR ->]
Add New School "): ng:///AddNewSchoolModule/addSchoolInfo.html#102:4
'modal' is not a known element:
If 'modal' is an Angular component, then verify that it is part of this module.
To allow any element add 'NO_ERRORS_SCHEMA' to the '#NgModule.schemas' of this component. ("
[ERROR ->]
at syntaxError (webpack-internal:///../../../compiler/esm5/compiler.js:706)
at TemplateParser.parse (webpack->internal:///../../../compiler/esm5/compiler.js:24882)
atJitCompiler._parseTemplate(webpackinternal:///../../../compiler/esm5/compiler.js:34835)
atJitCompiler._compileTemplate(webpackinternal:///../../../compiler/esm5/compiler.js:34810)
at eval (webpack-internal:///../../../compiler/esm5/compiler.js:34711)
at Set.forEach ()
atJitCompiler._compileComponents(webpackinternal:///../../../compiler/esm5/compiler.js:34711)
at eval (webpack-internal:///../../../compiler/esm5/compiler.js:34581)
at Object.then (webpack-internal:///../../../compiler/esm5/compiler.js:695)
atJitCompiler._compileModuleAndComponents(webpackinternal:///../../../compiler/esm5/compiler.js:34580)
Thanks in advance
I'm having to upgrade an application to Angular 5 and ran into this. The author's npm page (https://www.npmjs.com/package/ng2-bs3-modal) shows the elements now have a bs- prefix and the [show-close] attribute is now [showDismiss]:
<bs-modal #modal>
<bs-modal-header [showDismiss]="true">
<h4 class="modal-title">I'm a modal!</h4>
</bs-modal-header>
<bs-modal-body>
Hello World!
</bs-modal-body>
<bs-modal-footer [showDefaultButtons]="true"></bs-modal-footer>
</bs-modal>
Related
Is it possible to add custom errors into the ErrorBag
I am using nuxtjs. i have registered vee-validate into my plugin via nuxt.config.js
It works fine However
I want to use the same error code within the template
ex:
<template>
<div v-if="errors.all().length>0">
//loop through
</div>
</template>
i am using axios to fetch user information.
if the request doesnt return my expected data set. i was thinking i could simply
this.errors.push('this is my error message') //-> or some variant of this
When i do this i get that this.errors.push is not a function
I know that
this.errors = ErrorBag{ __ob__: Observer} //-> has items and a vmId attributes
If i amend the code to push onto ErrorBag i get push of undefined
It is documented in the API of ErrorBag. You can add custom messages such as:
// For example, you may want to add an error related to authentication:
errors.add({
field: 'auth',
msg: 'Wrong Credentials'
});
Check the documentation here for more info: https://vee-validate.logaretm.com/v2/api/errorbag.html
I'm using vue-toastr on my Laravel 5.5 and Vuejs 2 project.
The toasts are being showednormally, but I want to set some options globally for the toasts, like position...
I can't do this.
In my app.js file I've imported toastr from vue-toastr, required the styles and then Vue.component('vue-toastr', Toastr);.
I've tried this.$refs.toastr.defaultPosition = "toast-bottom-left" on my app.js like the docs say but it gives me an error Cannot read property 'toastr' of undefined
Any help?
As covered in the documentation:
Add component html: for vue 1.x
<vue-toastr v-ref:toastr></vue-toastr>
Add component html: for vue 2.x
<vue-toastr ref="toastr"></vue-toastr>
Then you can use
this.$refs.toastr.defaultPosition = "toast-bottom-left"
I'm using webpack and vue.js 2 and vue-google-maps.
I have an issue where i need to pass to a google maps component via a prop a rendered vue-template.
e.g.
<gmap-info-window
:options="infoOptions"
:position="infoWindowPos"
:opened="infoWinOpen"
:content="infoContent"
#closeclick="infoWinOpen=false">
</gmap-info-window>
i need to pass to the :content prop. something along the lines of this:
<p>
Some Name
<a :href="some.url" target="_blank" #click="myFunction('param1', $route.name, param2)">some link</a>
<p>
basically i need infoContent to be the vue compiled version of the above. I can get the template e.g. by doing:
this.infoContent = myTemplate;
but that only gets me the raw unrendered version of the template if i add .render() to that i start getting errors about _vm._self is undefined"
I am running Meteor release METEOR#1.4.2.3
I recently installed a social media share package via Atmosphere.
meteor add ellisonleao:sharerjs.
You can also read more about it # http://www.ellison.rocks/sharer.js/
My template looks like this:
Template.detail.events({
"click .sharer": function() {
//add new buttons with share behaviour
$('.postedImagesWell').append(<button class="sharer button" data-sharer="facebook" data-url="https://ellisonleao.github.io/sharer.js/">Share on Facebook</button>);
window.Sharer.init();
}
});
Find below the template in code:
<template name="detail">
<div class="postedImagesWell">
<img class = "img-responsive img-rounded postedImages" id = "trial" src="{{this.photo.url}}" alt="thumbnail" >
</template>
when I run click on the Share on Facebook link. I see this error message in my browser:
Uncaught ReferenceError: React is not defined
I have done some research on how to resolve the following issue which resulted in having to install various packages, which have shown to be all futile. I have had to uninstalled the packages.
Any help on how to resolve the issue would be great!
Initial Question
How, if at all, can we expose a view/view-model component from a plugin? For instance, we have the following:
// ./open-id/foo-bar.html
<template>
<p>FooBar</p>
</template>
// ./open-id/foo-bar.ts
export class FooBar { }
In the consuming application, we would like to do this:
// ./app.html
<require from="open-id/foo-bar"></require>
<foo-bar></foo-bar>
Edits
Simpler Name
Based on Robinson Collado's answer, we using a simpler name (foo not foo-bar) to reduce complexity.
// ./open-id/foo.html
<template>
<p>Foo</p>
</template>
// ./open-id/foo.ts
export class Foo { }
// ./app.html
<require from="open-id/foo"></require>
<foo></foo>
That approach threw this error:
Unhandled rejection Error: Load timeout for modules: template-registry-entry!open-id/foo.html,text!open-id/foo.html
Global Resource
Based on the Installing Plugins documentations, we tried adding the component as a global resource.
// ./open-id/open-id.ts
function configure(config: FrameworkConfiguration) {
config.globalResources('./foo');
}
That approach threw this error:
GET http://localhost:9000/src/open-id/open-id/foo.js 404 (Not Found)
That means Aurelia is looking for the component in open-id/open-id/, which is one directory too deep.
Loading as a Plugin
During development of the plugin, we're loading the plugin like this, which may be why Aurelia is looking one directory too deep. How can we load the plugin differently during developent?
// ./main.ts
aurelia.use.plugin("./open-id/open-id");
Loading as a Feature
aurelia.use.feature("./aurelia-open-id-connect");
The error now is this for each constructor that receiving an injection from our feature.
Message: key/value cannot be null or undefined. Are you trying to inject/register something that doesn't exist with DI?
Try changing the name of the custom tag <foo-bar></foo-bar> to <foobar></foobar>. The name of the tag should match the name of it's view-model class. Unless, if you use the #customElement decorator to explicitly declare the tag name for the custom element.