Access the properties of a tag


#1

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”

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 --');
        });
}

#2

Help link I had from Nikolay: https://www.telerik.com/forums/access-the-properties-of-a-tag

But not totally resolved.


#3

It has been proposed a solution, but I have the following problem that is described in the code comment.

//TS
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: "./page1.html", //Page containing ng-content
})
export class ItemsComponent implements OnInit {

    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;
            }
             
        })
    }
 
}
//Page1
<ScrollView>
    <StackLayout>
        <ng-content></ng-content>//Page2 will be displayed here. From the TS component that renders page1, how to access the tags and attributes that are on page2.
    </StackLayout>
</ScrollView>
//Page2
<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>

Access attribute