in my nativescript-angular project I have a component like this:
<StackLayout>
<Label *ngIf="ngContentIsEmpty"> ng-content is empty </Label>
<ng-content></ng-content>
</StackLayout>
Now, I would like to display some content if <ng-content> for this component is empty.Is there an easy way to do this?
I've tried this but not work in nativescript:
<StackLayout #wrapper>
<Label *ngIf="wrapper.childNodes.length == 0"> ng-content is empty </Label>
<ng-content></ng-content>
</StackLayout>
Try to this for check ng-content is empty.
Add In Html File:-
<StackLayout *ngIf="ngContentIsEmpty">Content</StackLayout>
<StackLayout #wrapper>
<ng-content></ng-content>
</StackLayout>
In TypeScript File:-
export class MyComponent implements OnInit, AfterContentInit {
#ContentChild('wrapper') wrapper:ElementRef;
public ngContentIsEmpty = false;
ngAfterContentInit() {
this.ngContentIsEmpty= this.wrapper.childNodes.length > 0;
}
}
Related
I have used a litle XamarinForms before and then i did a
naming to be able to point the c# code to it.
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MauiTest.MainPage"
BackgroundColor="{DynamicResource SecondaryColor}">
<StackLayout x:name="_stacklayoutname">
<Label Text="" x:Name="_Lable"/>
</StackLayout>
</ContentPage>
And then i did like this in the MainPage.xaml.cs
public MainPage()
{
InitializeComponent();
_stacklayoutname.Children.Add(new Label { Text = "TEST" });
_Lable.Text = "TEST";
}
now it get this, but i can change the _Lable to "Text".
how can i point to a stacklayout.
Severity Code Description Project File Line Suppression State
Error CS0103 The name '_stacklayoutname' does not exist in the current context MauiTest (net6.0-android), MauiTest (net6.0-ios), MauiTest (net6.0-maccatalyst), MauiTest (net6.0-windows10.0.19041) *** 11 Active
this is wrong
<StackLayout x:name="_stacklayoutname">
it should be
<StackLayout x:Name="_stacklayoutname">
I have an application written in NativeScript with Angular 2. In it I have a list view like this:
<ListView row="1" [items]="items" (itemTap)="onNavigationItemTap($event)" class="root-drawer-content">
<ng-template let-item="item">
<StackLayout class="root-item-stack-layout">
<Label [text]="item.title" textWrap="true" class="btn btn-primary" [class.btn-active]="item.enabled"></Label>
<StackLayout height="1" class="root-drawer-content"></StackLayout>
</StackLayout>
</ng-template>
</ListView>
How can I force specific item to be disabled? Both visually and in terms of behavior.
You are almost there. As you are using item.enabled property to choose the btn-active class, you can apply the same logic to for disabled(Your custom one e.g change the background color to gray to look disabled) to StackLayout.
<ng-template let-item="item">
<StackLayout class="root-item-stack-layout" [class.enabled]="item.enabled">
<Label [text]="item.title" textWrap="true" class="btn btn-primary" [class.btn-active]="item.enabled"></Label>
<StackLayout height="1" class="root-drawer-content"></StackLayout>
</StackLayout>
</ng-template>
And for the functionality, you can handle that in your .ts file where your manage the itemTap.
(itemTap)="onNavigationItemTap($event)"
public onNavigationItemTap(args) {
const currentItemView = args.view;
const item = currentItemView.bindingContext;
if(item.enabled){
// do your stuff
}
I'm trying to do something like this
Like This
I have Listview with clicked label " Edit " I want when i click this label it's position is detected and display
label at Aliaddress is clicked
I Used TapGestureRecognizer for this but when i google it i fount that selected item doesn't work with TapGesture
This is my xaml
<ListView ItemsSource="{Binding UserAdresses}" SelectedItem="{Binding SelectedAddress}" HorizontalOptions="{Binding HoriRLLR}" RowHeight="{Binding RowHeight}" VerticalOptions="FillAndExpand">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout VerticalOptions="FillAndExpand">
<Label Text="{Binding Country}" TextColor="Orange" FontSize="Large" FontAttributes="Bold"></Label>
<Label Text="{Binding Address}" TextColor="Black" FontSize="Medium"></Label>
<Label Text="{Binding City}" TextColor="Black" FontSize="Medium"></Label>
<Label Text="{translator:Translate Edit}" TextColor="Black" FontSize="Medium">
<Label.GestureRecognizers>
<TapGestureRecognizer
Command="{Binding Path=BindingContext.EditAddressesCommand, Source={x:Reference CustomerAdressesPage}}"/>
</Label.GestureRecognizers>
<Label.Effects>
<controls:UnderlineEffect></controls:UnderlineEffect>
</Label.Effects>
</Label>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
my code
public DelegateCommand EditAddressesCommand => new DelegateCommand(EditAddresses);
public DelegateCommand DeleteAddressesCommand => new DelegateCommand(DeleteAddresses);
private readonly IPageDialogService _dialogService;
private ObservableCollection<CustomerAdressesModel> _userAdresses;
public ObservableCollection<CustomerAdressesModel> UserAdresses
{
get { return _userAdresses; }
set { SetProperty(ref _userAdresses, value);
}
}
private CustomerAdressesModel _selectedAddress;
public CustomerAdressesModel SelectedAddress
{
get { return _selectedAddress; }
set { SetProperty(ref _selectedAddress, value); }
}
private void EditAddresses()
{
_dialogService.DisplayAlertAsync("Test", "Edit Clicked", "Ok");
}
How can i do this and detect the position of clicked label
You can use this: CommandParameter="{Binding .}" inside TapGestureRecognizer
Xaml:
<Label.GestureRecognizers>
<TapGestureRecognizer
CommandParameter="{Binding .}"
Command="{Binding Path=BindingContext.EditAddressesCommand, Source={x:Reference CustomerAdressesPage}}"/>
</Label.GestureRecognizers>
ViewModel:
public ICommand EditAddressesCommand
{
get
{
return new Command<YourModel>((YourModel model) =>
{
//Access your model properties
});
}
}
Hope this may solve your problem.
I thought this is easy, but unfortunately, I can not find out any answer.
I installed telerik-ui, and want to use RadListView. From the doc, I can see the demo page with perfect layout, to have mulitple items per row. In my case, I want to have two columns per row and then show the list view. Below is my xml code, but it is totally blank, I do not know why. Can you help?
This is the code in my XML:
<RadListView [items]="flattenDishes">
<ListViewLinearLayout scrollDirection="Vertical" itemHeight="500" spanCount="2"></ListViewLinearLayout>
<ng-template tkListItemTemplate let-flattenDish="item">
<GridLayout rows="auto" columns="auto, *">
<StackLayout orientation="vertical">
<Image [src]="serverUrl +'images/' + flattenDish.get('option_imageUrl') " stretch="aspectFill" width=200 height=200></Image>
<Label [text]="flattenDish.get('option_size')+':'+ flattenDish.getTrans('zh').get('title')"></Label>
<Label [text]="flattenDish.get('option_price')"></Label>
</StackLayout>
</GridLayout>
</ng-template>
</RadListView>
Can anyone help me to have a working template here?
Thanks
Try this, is not with RadListView but the important part is inside the item:
<ListView class="list-group" [items]="workOrders" (itemTap)="onItemTapSecondList($event)" separatorColor="gray">
<ng-template let-workOrder="item">
<StackLayout orientation="horizontal">
<StackLayout>
<Label text="Order ref:" class="order-id-label"></Label>
</StackLayout>
<StackLayout>
<Label text="Order date:" class="order-id-label"></Label>
</StackLayout>
</StackLAyout>
</ng-template>
</ListView>
I have a RadSideDrawer and I want to apply a directive to a Control that is in the MainContent of the RadSideDrawer.
Here is my Component using a RadSideDrawer.
<RadSideDrawer>
<StackLayout tkDrawerContent class="sideStackLayout">
<StackLayout class="sideTitleStackLayout" backgroundGradient [gradientColors]="['red','blue']">
<Image horizontalAlignment="center" class="avatar" src="res://avatar"></Image>
<Label horizontalAlignment="center" class="name" text="Zeeko"></Label>
<Label horizontalAlignment="center" class="email" text="1519560753#qq.com"></Label>
</StackLayout>
<StackLayout>
<StackLayout orientation="horizontal">
<Label [text]="'fa-file-text' | fonticon" class="fa icon"></Label>
<Label class="side-item-lbl" text="我的简历"></Label>
</StackLayout>
<Label class="side-item-lbl" col="2" row="2" text="已投递"></Label>
</StackLayout>
</StackLayout>
<StackLayout tkMainContent>
<Button text="OPEN DRAWER" (tap)=openDrawer()></Button>
<Label text="欢迎来到主页" textWrap="true"></Label>
</StackLayout>
And here is my directive.
Directive
Then I got unexpected ElementRef in the Directive's ngOnInit method, whoes nativeElement property is undefined.
If you can help me, I'll be very grateful.
You can take a look at the RadSideDrawer sdk angular examples of the nativescript-telerik-ui plugin here.
More specifically you can get the RadSideDrawerComponent in the component code like so:
import { Component, ViewChild, AfterViewInit } from "#angular/core";
import { RadSideDrawerComponent, SideDrawerType } from "nativescript-telerik-ui-pro/sidedrawer/angular";
#Component({
moduleId: module.id,
selector: "tk-sidedrawer-getting-started",
templateUrl: 'getting-started.component.html',
styleUrls: ['getting-started.component.css']
})
export class SideDrawerGettingStartedComponent implements OnInit {
constructor() {
}
#ViewChild(RadSideDrawerComponent) public drawerComponent: RadSideDrawerComponent;
private drawer: SideDrawerType;
ngAfterViewInit() {
this.drawer = this.drawerComponent.sideDrawer;
}
public openDrawer() {
this.drawer.showDrawer();
}
}
Copied from here.