I imported the datepicker and it shows up fine.
But when I try to import a typeahead or buttons or anything, I get the <whatever> is not a known element error.
What I'm doing is import the module in the app.module like that:
import {DatepickerModule} from 'ngx-bootstrap/datepicker';
import { TypeaheadModule } from 'ngx-bootstrap/typeahead';
import { ButtonsModule } from 'ngx-bootstrap/buttons';
// also tried:
// import { DatepickerModule, TypeaheadModule... } from 'ngx-bootstrap';
// ..but again no luck
...
imports: [
DatepickerModule.forRoot(), //only this works
TypeaheadModule.forRoot(),
ButtonsModule.forRoot(),
...]
Then on my history.module in a same way with the only difference that .forRoot() is now omitted.
Then on a child component of the parent history component I have:
<span *ngIf="showFilters" class="value bootstrap-iso" >
<div style="display:inline-block;">
<datepicker
[(ngModel)]="dt"
[datepickerMode]="'month'"
[showWeeks]="false"
[dateDisabled]="dateDisabled"
[maxDate]="today">
</datepicker>
</div>
</span>
which works, but for example these don't work:
<typeahead [typeahead]="'documents'"></typeahead>
<btnCheckbox></btnCheckbox>
Doesn't matter if I include ngModel or other attributes, I always get the not a known element error. So I assume it has to do with my imports, my naming, or somethng, but honestly I can't see what's missing.
EDIT: Using Angular 4, "#angular/cli": "1.1.1", "ngx-bootstrap": "^1.7.1", "bootstrap": "^4.0.0-alpha.6", "typescript": "~2.3.3"
Well, I actually have to add the input shown in the template section in the documentation.
So this works:
<input [(ngModel)]="selected"
[typeahead]="documents"
class="form-control">
Because the documentation mentions Selector and Exported as I thought we should use these values. I thought the templates are just showing how the components work under the hood.
As my collegue said , please add
import {FormsModule, ReactiveFormsModule} from '#angular/forms';
Related
I am now developing a web site using React and it contains solidity code view panel.
The editor looks like the one on the below link.
https://ftmscan.com/address/0xce761d788df608bd21bdd59d6f4b54b2e27f25bb#contracts
I have implemented similar one using AceEditor which is available by installing react-ace, ace-builds modules.
Code is like this.
import "./styles.css";
import React from "react";
import { render } from "react-dom";
import AceEditor from "react-ace";
import "ace-builds/src-noconflict/mode-java";
import "ace-builds/src-noconflict/theme-github";
import "ace-builds/src-noconflict/ext-language_tools";
import { code } from "./code";
function onChange(newValue) {
console.log("change", newValue);
}
export default function App() {
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
<AceEditor
theme="github"
onChange={onChange}
name="UNIQUE_ID_OF_DIV"
editorProps={{ $blockScrolling: true }}
setOptions={{
enableBasicAutocompletion: true,
enableLiveAutocompletion: true,
enableSnippets: true
}}
value={code}
readOnly="true"
/>
</div>
);
}
And I imported code from code.tsx file and error occurs when that code includes acute character.
My example code is on codesandbox and here is the link.
https://codesandbox.io/s/dazzling-sun-0zj25?file=/src/index.js
I have 2 problems.
how to parse code that has acute( ` ) character inside?
As you can see from my example code, parsing code is assigned to value props and should be wrapped by acute character and I can't resolve to wrap code that contains acute character inside.
As you can see ftmstan site I mentioned above, you can see outlined button on top right of code view panel and it shows structure of solidity code.
And I can't understand how to get structure of code like that site.
Any help will be appreciated and thanks in advance.
ace website has instructions about creating or importing a new mode https://ace.c9.io/#nav=higlighter. You can use that with the syntax from vscode extension https://github.com/juanfranblanco/vscode-solidity/blob/master/syntaxes/solidity.json
The response to this issue says:
The slot is missing from the docs, you can already do this.
Can someone provide a toy example or explanation of how to do this? To clarify, what I want is to import components (eg. A.vue, B.vue, C.vue) into another (eg. Carousel.vue), then display said components in a carousel. Something along the lines of:
<template>
<v-carousel>
<v-carousel-item v-for="(component, i) in components"></v-carousel-item>
</v-carousel>
</template>
<script>
import A from '#/components/A'
import B from '#/components/B'
import C from '#/components/C'
export default {
components: {
A,
B,
C
}
</script>
Issue says if you include your components properly, you can just put them inside v-carousel e.g.
<v-carousel>
<your-custom-component/>
</v-carousel>
Or inside v-carousel-item also
<v-carousel-item>
<v-btn>Hi</v-btn>
</v-carousel-item>
In order to make <your-custom-component/> work inside <v-carousel>, top level component inside <your-custom-component/> must be v-carousel-item:
// YourCustomComponent.vue
<template>
<v-carousl-item>
// ...
</v-carousl-item>
</template>
(That is unless something has changed in subsequent versions of vuetify)
Well, if you are OK with dropping the carousel requirement, then you may want to take a look at v-window. It provides exactly what you are asking for.
I am a beginner by Aurelia. I want to program a Custom Attribute as you see here:
square.js:
/*jshint esversion: 6 */
import {bindable, inject} from 'aurelia-framework';
#inject(Element)
export class SquareCustomAttribute {
#bindable sideLength;
#bindable color;
constructor(element){
this.element = element;
}
sideLengthChanged(newValue, oldValue){
this.element.style.width = this.element.style.height = `${newValue}px`;
}
colorChanged(newValue, oldValue){
this.element.style.backgroundColor = newValue;
}
}
and you can see html in the following:
<template>
<require from="./square"></require>
<div square="color.bind: squareColor; side-length.bind: squareSize"></div>
</template>
I get an error:
ERROR [app-router] Error: (SystemJS) Unable to dynamically transpile ES module as SystemJS.transpiler set to false.
Could you please help me?
An easy way to do what you are trying to do (not purely an attribute) is this:
try this:
square.html
<template bindable="sideLength, color">
<div css.bind="height: ${sideLength}; width: ${sideLength}; background-color: ${color}"/>
</template>
now you just use it like this:
[any].html
<require from="[path]/[to]/square.html"></require>
.
.
.
<square side-length="50" color="red"></square>
.
.
.
There is almost an exact example of this under data binding in the docs:
Aurelia Docs: Cheat Sheet - Databinding
Creating an answer so this can be closed.
User had an error with his script file causing the transpiler to fail. Changing the file extension from .js to .ts solved the issue as the TypeScript file could be handled by SystemJS.
I have the following Single File Component in Vue.js.
The plasmid tag is meant to get rendered by the angularplasmid.complete.min.js file but isn't for some reason. Is this the correct way to import a library in a component?
I am restructuring an old Vue project to be better designed but I know that the plasmid tag renders on here (which doesn't use single file components): https://github.com/asselinpaul/dnaviewer/blob/master/app/index.html
Any help much appreciated.
<template>
<div id="DNA Plasmid">
<h3>Plasmid Visualisation</h3>
<div class="section">
<plasmid id='p1' plasmidheight="800" plasmidwidth="800" v-bind:sequencelength="sequenceLength">
<plasmidtrack id='t1' radius="200" width="55">
<trackmarker v-for="(bound, index) in bounds" class='marker' v-bind:start="bound.start" v-bind:end="bound.end" v-bind:style="{ fill: bound.color }" v-bind:key="bound.start">
<markerlabel v-bind:text="bound.name" v-bind:vadjust='bound.vadjust' style='font-size:12px'></markerlabel>
</trackmarker>
<tracklabel v-bind:text="name" style='font-size:25px;font-weight:bold'></tracklabel>
</plasmidtrack>
</plasmid>
</div>
</div>
</template>
<script>
import './angularplasmid.complete.min.js'
...
Solved by requiring the file when my component is mounted:
mounted: function(){
require('./angularplasmid.complete.min.js')
}
You definitely can't reasonably combine angular functions with Vue. Plus, angular use its own dependency system.
Beside, you can use import in a single-file component exactly the same way than in any script. But of course be sure that your imported script is actually exporting something (or is relevant to execute as a module, which is probably not the case here).
Here is a reminder of the syntax:
import defaultMember from "module-name";
import * as name from "module-name";
import { member } from "module-name";
import { member as alias } from "module-name";
import { member1 , member2 } from "module-name";
import { member1 , member2 as alias2 , [...] } from "module-name";
import defaultMember, { member [ , [...] ] } from "module-name";
import defaultMember, * as name from "module-name";
import "module-name";
Source: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import
Note that the commonJS require() and module.exports are also perfectly fine in a single-file component.
I am a newbie with Aurelia and I am trying to create my first custom element. I am coming from Angular 1 and as far as I could understand, custom elements seems to be similar to Angular 1 directives.
So, I am getting the following error:
I have checked my template looking for some bad written html, but I can't find it. Does anyone have any idea? Code is shown below:
src/views/login/login.html
<template>
<require from = "/resources/elements/login-form/login-form"></require>
<h1>Login</h1>
<login-form></login-form>
</template>
src/views/login/login.js
export class Login {}
src/resource/elements/login-form/login-form.html
<template>
<div>Here's gonna be a form</div>
</template>
src/resource/elements/login-form/login-form.js
import {customElement} from 'aurelia-framework';
#customElement('login-form')
export class LoginForm {
}
src/resource/elements/login-form/login-form.js as below
export class LoginFormCustomElement {
}
This will work Aurelia framework having naming Conventions. When ever you are using as a custom element better to pass class name with end of CustomElement.