Access the properties of a tag

[Gustavo]

Hi everyone, I would like to help.

I have a CardView object and am wanting to traverse it to get into a particular tag to make a treatment.

CardView html basically has a structure like this:

<CardView>
     <GridLayout>
         <StackLayout>
             ....
         <StackLayout>
         <StackLayout>
             .....
         <StackLayout>
         <StackLayout>
             .....
         <StackLayout>
         <GridLayout>
             <StackLayout>
                 <Button class = "button-dark"> </ Button>
             <StackLayout>
         </ GridLayout>
     </ GridLayout>
</ CardView>

Where I want to access the button tag to put the property: isEnabled = "true"

[Nikolay Tsonev]

Hello Gustavo,

For the described scenario I would suggest using data-binding functionality in Angular and to bind isEnabled property. The binding allows you to change the property value via the code behind. For example:

HTML

<CardView>
     <GridLayout>
         <StackLayout>
             ....
         <StackLayout>
         <StackLayout>
             .....
         <StackLayout>
         <StackLayout>
             .....
         <StackLayout>
         <GridLayout>
             <StackLayout>
                 <Button [isEnabled]="isBtnEnabled" class = "button-dark"> </ Button>
             <StackLayout>
         </ GridLayout>
     </ GridLayout>
</ CardView>

TypeScript

@Component({
    selector: "Home",
    moduleId: module.id,
    templateUrl: "./home.component.html",
    styleUrls:["../tabs.component.scss"]
})
export class HomeComponent implements OnInit {
public isBtnEnabled = true;
}

I also would like to let you know that we will soon close UI for NativeScript Forum section in Telerik Admin in favour of NativeScript forum.
Since UI for NativeScript is free for using we consider that the best place for discussions and questions will be the official NativeScript forum.
Regards,
nikolay.tsonev
Progress Telerik

[Gustavo]

Thanks ikolay, but I have more samples of the problem.

I can animate the card by having it open and close according to the card that is clicked.

In the html layout of the card that has the structure I passed, there is a button on the card that is disabled and I want to enable it as I enter the open function.

 

In my view, I have to access the CardView object and enter inside its properties for isEnabled = "true" arrow.

_setupEvents() {
    let scrollView: ScrollView = this._scrollView.nativeElement;
    this._children.forEach((child: LayoutBase, mainIndex: number) => {
        if (child) {
            child.addEventListener('tap', () => {
                let indexChild = this._children.indexOf(child);
                this._children.forEach(
                    (
                        childIterator: LayoutBase,
                        index: number,
                        array: View[]
                    ) => {
                        //Here I have the result of the three view cards.
                        console.log('childIterator: ' + childIterator); // result: childIterator: CardView(192), childIterator: CardView(236), childIterator: CardView(280)

                        if (index < indexChild) {
                            this._childrenState[index] = false;
                        }

                        if (index > indexChild) {
                            if (this._childrenState[indexChild]) {
                                //The CardView object enters the animation function
                                this._open(childIterator);
                            } else {
                                //The CardView object enters the animation function
                                this._close(childIterator);
                            }
                            this._childrenState[index] = false;
                        } else {
                            this._close(childIterator);
                        }
                        if (index === indexChild) {
                            if (indexChild === array.length) {
                                if (this._childrenState[indexChild]) {
                                    scrollView.scrollToVerticalOffset(
                                        0,
                                        true
                                    );
                                } else {
                                    let scrollTo: number = index * 50 - 50;
                                    scrollView.scrollToVerticalOffset(
                                        scrollTo,
                                        true
                                    );
                                }
                                this._childrenState[indexChild] = !this
                                    ._childrenState[indexChild];
                            } else {
                                let scrollTo: number = index * 50 - 50;
                                scrollView.scrollToVerticalOffset(
                                    scrollTo,
                                    true
                                );
                                this._childrenState[indexChild] = !this
                                    ._childrenState[indexChild];
                            }
                        }
                    }
                );
            });
        }
    });
}

//Open the card
_open(view: View) {
    console.log(view); //result: CardView


    view
        .animate({
            translate: { x: 0, y: 354 }
        })
        .then(() => {
            // console.log('_open --');
        });
}

//Closes the card
_close(view: View) {
    view
        .animate({
            translate: { x: 0, y: 0 }
        })
        .then(() => {
            // console.log('_close --');
        });
}

 

Okay, I'll focus on all the questions in the official Nativescript forum.

 

[Nikolay Tsonev]

Hi Gustavo,

Thank you for writing us back,

You could list all child of the specific component while using the eachLayoutChild method. This method will return you every child of the container, and you will be able to access the needed element properties. For example:

HTML

<StackLayout class="page">
    <Button text="Get child components" (tap)="onTap($event)"></Button>

    <StackLayout id="container">
        <Button text="Button1"></Button>
        <Button text="Button2"></Button>
        <Button text="Button3"></Button>
    </StackLayout>
</StackLayout>

TypeScript

import { Component, OnInit } from "@angular/core";

import { Item } from "./item";
import { ItemService } from "./item.service";
import { Page } from "tns-core-modules/ui/page";
import {StackLayout} from "ui/layouts/stack-layout";
import {Button} from "ui/button"
@Component({
    selector: "ns-items",
    moduleId: module.id,
    templateUrl: "./items.component.html",
})
export class ItemsComponent implements OnInit {

    // This pattern makes use of Angular’s dependency injection implementation to inject an instance of the ItemService service into this class.
    // Angular knows about this service because it is included in your app’s main NgModule, defined in app.module.ts.
    constructor() { }

    ngOnInit(): void {

    }
    onTap(args){
        var page:Page = <Page>args.object.page;
        var layout:StackLayout = <StackLayout>page.getViewById("container");
        layout.eachLayoutChild(result =>{
            var child = result;
            if(child instanceof Button){
                console.log("button found")
                console.log(child.text);
                if(child.text == "Button3")
                    child.isEnabled=false;
            }

        })
    }

}

In the above-attached sample code, when we tap on the button with name `Get child components`, we get an instance of the StackLayout with id container and with the help of eachLayoutChild method we search for the last Button and setup it's isEnabled property to false.

Your question seems to be related to a component(CardView), which is not part of the UI for NativeScript suite. As I mentioned in my previous comment, I would suggest opening a new thread in NativeScript forum, where the other community members could help to solve your case.

Also if you have a problem with the CardView component itself, you could contact the plugin's authors, while logging a new issue in the nativescript-cardview repository.

Regards,
nikolay.tsonev
Progress Telerik