I want to implement a TabView with Angular 2.0.1, NativeScript 2.3.0. I follow this official guide here, but run into an issue below.
<TabView #tabview>
[ERROR ->]<StackLayout *tabItem="{title: 'Profile'}" >
<ListView [items]='items'>
<template let-i"): LoginComponent#17:4
Property binding tabItem not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "directives" section. ("
</ListView>
</StackLayout>
[ERROR ->]<StackLayout *tabItem="{title: 'Stats'}">
<Label text="Second tab item"></Label>
</StackLay"): LoginComponent#24:4
Property binding tabItem not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "directives" section. ("
<Label text="Second tab item"></Label>
</StackLayout>
[ERROR ->]<StackLayout *tabItem="{title: 'Settings'}">
<Label text="Third tab item"></Label>
The error I got from the compiler is
Property binding tabItem not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "directives" section.
I thought all of nativescript directives have been included by default, ex: Button, TextField, etc. Is *tabItem a special directive that I need to import manually?
By the way, What I really want to do, is to have a TabView stick at the bottom of the phone, like Dock with a few tabs, exactly like Facebook mobile app dock. Can someone post a code snippet?
Ensure you import NativeScriptModule in your Angular #NgModule:
import { NativeScriptModule } from 'nativescript-angular/platform';
...
#NgModule({
imports: [NativeScriptModule, ...]
})
Answer is late but hope it help someone else.
This question was asked over 2 years ago, but I ran into this error today and here's how I ended up fixing it. I use a structure where all pages are imported by a PageModule, and that PageModule is then imported by the AppModule. The issue at hand: PageModule doesn't know about the NativeScriptModule. If you add NativeScriptModule to the import array of your PageModule (or whatever other module you're using, could be for importing Components or anything else), it'll fix the problem.
import { NativeScriptModule } from "nativescript-angular/nativescript.module";
// Module declaration, not important
imports = [
// Other imports
NativeScriptModule
],
The common module is all you need to import, it's responsible for the tabViews and all it's child property and element.
import { NativeScriptCommonModule } from 'nativescript-angular/common';
don't forget to mount in your import.
#NgModule({
imports: [NativeScriptCommonModule, ...]
})
Related
I have a xamarin forms application and I want to add a footer to the flyout menu. After reading the official documentation it should be straightforward, just adding a few lines into the AppShell.xaml like so:
<Shell.FlyoutFooterTemplate>
<DataTemplate>
<Label HeightRequest="300" BackgroundColor="Red"/>
</DataTemplate>
</Shell.FlyoutFooterTemplate>
This works perfectly fine when I tried it in a new project, but for some reason, it doesn't work in my current application giving this error:
Error XLS0415 The attachable property 'FlyoutFooterTemplate' was not found in type 'Shell'.
I tried to find the definition of FlyoutHeaderTemplate and I found this in Shell [from metadata] file:
[1]: https://i.stack.imgur.com/xqZub.png
public Shell();
...
public DataTemplate FlyoutHeaderTemplate { get; set; }
public FlyoutHeaderBehavior FlyoutHeaderBehavior { get; set; }
public object FlyoutHeader { get; set; }
There should be a similar definition for both, Header and Footer, but there is only one for the Header. The file cannot be edited and I was not able to locate it either. Any ideas why the definition for Footer is missing, how can I add it, or workarounds?
PS: Adding the footer from C# code doesn't work either and I tried to clean/rebuild and resetting both, PC and VS.
First, Confirm that you can add a simple Header:
<Shell.FlyoutHeader>
<Label Text="This is the header." />
</Shell.FlyoutFooter>
If that doesn't work, then you are doing something fundamentally wrong - post the code for the <Shell> XAML, within which you added those lines. Make sure you include those lines, to show where in the XAML they are. Make sure they are between <Shell> and </Shell>, but not nested inside some deeper node. For example, they musn't be inside a <StackLayout> or <ContentView> or other container - they must be direct children of the <Shell>.
Unless you are doing something fancy, you don't need a Template.
Try simply:
<Shell.FlyoutFooter>
<Label HeightRequest="300" BackgroundColor="Red"/>
</Shell.FlyoutFooter>
If 1) above works, but not 2), then your project is referencing an out-of-date version of Shell. Fixes:
A. Check that project's Xamarin.Forms nuget doesn't need an Update. (Solution / Manage Nugets.)
B. OR delete bin and obj folders. Then Rebuild Solution.
C. Worst case, start with a new project, in which you are able to use that functionality, and add back in all your files.
Is there a way to create a reusable ActionBar for all pages?
I followed this tutorial which walked me through the process of adding in a RadSideDrawer to my 4 page app (not 100% if using a sidedrawer would change how I could approach this problem).
The 4 pages all have the same ActionBar. Instead of copy/pasting the code on each page (and updating on each page with changes), how do I reuse the same code for them all?
I tried statically defining the ActionBar code in the Frame content...
<template lang="html">
<Page>
<RadSideDrawer>
<StackLayout ~drawerContent>
<slot name="drawerContent"></slot>
</StackLayout>
<Frame ~mainContent>
<!-- TRIED PUTTING ACTIONBAR STRUCTURE HERE? -->
<slot name="mainContent"></slot>
</Frame>
</RadSideDrawer>
</Page>
</template>
I've also tried creating a custom component (with my ActionBar code living in /widgets/header/header.xml), by following this tutorial...
<Page xmlns:header="widgets/header">
<header:header />
</Page>
But I got an error message in the console:
[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
My best guess, at this moment, is that NativeScript-Vue prefers the use of slots -- but how would I go about putting a slot into content that's populating another slot (<slot name="mainContent"></slot>)?
Existing questions on this subject refer to how to use Angular with FontAwesome Icons and the Answer is ideally Angular FontAwesome. I searched both repo's and didn't really find much using angular-fontawesome. There are hints of older solutions only.
So I have that. I am also using Angular Material Buttons, to which I have been tasked with using FontAwesome Icons in my Buttons and this leads me to Material Icons
I am not really sure where to begin.
Providing I have added an Icon to angular-fontawesome as described. I have a Button with a Icon ready to go, there is a standard method to use to connect the two?
TLDR: I want to use a Material Icon Button, but I am unable to use a Material Icon and have to use FontAwesome Icons instead. I don't know how to achieve this.
Approach 1: Material icon registry
Material allows to use custom SVG icons with its components (like mat-button). FontAwesome icons are also SVGs, so you can use this mechanism to solve task at hand.
// 1. Import desired FontAwesome icon
import { faFontAwesomeFlag } from '#fortawesome/free-brands-svg-icons';
import { icon } from '#fortawesome/fontawesome-svg-core';
// 4. Use with `mat-icon` component in your template
#Component({ template: '<button mat-button type="button"><mat-icon svgIcon="font-awesome" style="vertical-align: top"></mat-icon>Make Awesome!</button>' })
export class AppComponent {
constructor(registry: MatIconRegistry, sanitizer: DomSanitizer) {
// 2. Render icon into SVG string
const svg = icon(faFontAwesomeFlag).html.join('');
// 3. Register custom SVG icon in `MatIconRegistry`
registry.addSvgIconLiteral(
'font-awesome',
sanitizer.bypassSecurityTrustHtml(svg)
);
}
}
Also check this issue for description of a more lightweight implementation.
Approach 2: Use fa-icon component from angular-fontawesome library
As you already seem to use #fortawesome/angular-fontawesome package in your application, you can avoid using mat-icon altogether and use fa-icon inside mat-button instead.
import { faFontAwesomeFlag } from '#fortawesome/free-brands-svg-icons';
#Component({ template: '<button mat-button type="button"><fa-icon [icon]="faFontAwesomeFlag" style="padding-right: 6px"></fa-icon>Make Awesome!</button>' })
export class AppComponent {
faFontAwesomeFlag = faFontAwesomeFlag;
}
Note that you'll also need to add FontAwesomeModule to imports for this to work. See documentation for more details.
Here is the demo with both described approaches: https://stackblitz.com/edit/components-issue-8znrc5
Note that I also had to add some CSS to ensure that icon is aligned well with the button text.
Go to your project directory and run this command to install google material icons pack
npm add material-design-icons.
Next, update the “.angular-cli.json” file to include the web font into the “index.html” page when application gets compiled:
{
styles: [
"./assets/fonts/material-icons/material-icons.css"
]
}
Finally, you can test the font by updating the main application template with something like the following:
<h1>Material Icons</h1>
<i class="material-icons">account_circle</i>
<i class="material-icons">thumb_up</i>
You can refer to this site . I followed all the steps fro this site to use mat-icons when I was creating angular 6 project.
More
You can also checkout this stackblitz
Update
If you want to use font awesome icons I suggest you can start by following this guide . It's super easy and simple to use.
Install font-awesome dependency using the command npm install --save font-awesome angular-font-awesome.
After that import the module :
import { AngularFontAwesomeModule } from 'angular-font-awesome';
#NgModule({
//...
imports: [
//...
AngularFontAwesomeModule
],
//...
})
export class AppModule { }
I'm a graphic designer who has to customize a project done with strapi - and I am sooo lost. I managed to change backgroundcolors, backgroundimages so far - no problem. BUT: I am totally unable to customize the elements like the primary buttons.
I found lots of class definitions ".primary", changed them - without a result ... in the end I removed them all ... but the primary buttons stills look the same. How? Why?
The only why to get rid of the visual appearance of the primary button, was by removing (e.g. of the login page -> within the index.js under admin/src/containers/AuthPage) "primary" of the buttons declaration.
<Button primary label="users-permissions.Auth.form.button.login" type="submit" />
But that's not what I wanted. I want to customize e.g. the primary buttons. Not getting rid of it.
I searched stackoverflow for strapi customization or ui issues but couldn't find a solution. I found a lot of strategies of overriding bootstrap CSS, e.g.:
How can I override Bootstrap CSS styles?
But strapis SCSS seems to something different I obviously don't understand yet.
If anyone has an idea or did already overrides to e.g. primary button - please let me know.
Thanks in advance, Stef.
You have two ways to override the default style of a button
You can pass a style prop to the component
<Button label="Label" type="button" style={{ background: 'red' }} />
You can pass a custom className prop:
In order to do so, you need to add the class in your 'plugins/users-permissions/admin/src/containers/Auth/styles.scss` file (where the component is going to be used)
.customButton {
background: red;
}
Then in your index.js file
import Button from 'components/Button';
import styles from './styles.scss';
render() {
return (
<Button label="label" className={styles.customButton} />
);
}
i want to play an animation when a new message is added in the DOM.
but i don't know how to find my object and edit it with code in (this.zone.run) function :
addMessage(message: string){
this.messages.unshift(message);
// renderer
this.zone.run(() => {
});
}
here's the app.component.html
<StackLayout #container>
<ScrollView>
<WrapLayout #red>
<Label class="message" *ngFor="let message of messages" [text]="message"></Label>
</WrapLayout>
</ScrollView>
</StackLayout>
i want to edit the first child of the WrapLayout element
There is no DOM with NativeScript.
However a major community contributor wrote a plugin to help transition web developers into native development with NativeScript. This plugin provides helper methods that you'll find familiar to the web and DOM. https://github.com/NathanaelA/nativescript-dom
Just remember these are helper methods are not something provided out of the box by NativeScript. You can get any view by its id in NativeScript several ways and during different events (page/frame and component level).
I recall there's no page component with NativeScript with angular but I think you still have the frame module which you could do something like
frame.topmost().currentPage.getViewById('yourID');
Making sure you import(require) the frame module.