items.component.html

<!--
The template defines the view of the component - what is actually rendered.
In NativeScript applications the template is defined with XML using NativeScript UI elements.
It is different from HTML. So instead of <input>, <span>, <div> etc. - we have <TextField>, <Label> and layouts.
The important thing is that although the elements are different - all of the Angular’s template syntax works exactly the same.
So you can still use template expressions, bindings, templates as well as all the built-in directives.
-->

<!--
The ActionBar is the NativeScript common abstraction over the Android ActionBar and iOS NavigationBar.
http://docs.nativescript.org/ui/action-bar
-->
<ActionBar title="@nativescript/angular" class="action-bar"> </ActionBar>

<!--
The GridLayout arranges its child elements in a table structure of rows and columns.
A cell can contain multiple child elements, they can span over multiple rows and columns, 
and even overlap each other. The GridLayout has one column and one row by default.
You can learn more about NativeScript layouts at https://docs.nativescript.org/ui/layout-containers.

These components make use of several CSS class names that are part of the NativeScript
core theme, such as p-20, btn, h2, and list-group. You can view a full list of the
class names available for styling your app at https://docs.nativescript.org/ui/theme.
-->
<GridLayout rows="auto,,*" class="page">
  <StackLayout row="0" class="p-4">
    <Label [text]="message" class="text-3xl font-bold text-center text-blue-500"></Label>
    <Image src="~/assets/angular.png" class="w-[200] h-center mb-2 align-top"></Image>
    <!-- <Button (tap)="openModal()" text="Taste the Rainbow 🌈" [borderRadius]="borderRadius" [fontSize]="fontSize" backgroundColor="#00d2ff" color="#fff" margin="0" width="100%" fontWeight="bold" height="50"></Button> -->
    <Button
      (tap)="openModal()"
      text="Open Modal"
      [borderRadius]="borderRadius"
      [fontSize]="fontSize"
      backgroundColor="#00d2ff"
      class="text-white w-full font-bold h-[50]"
    ></Button>
    <Button
      (tap)="fetchTodos()"
      text="Make a native Http networking request"
      [borderRadius]="borderRadius"
      [fontSize]="fontSize"
      padding="0"
      backgroundColor="#00d2ff"
      class="text-white mt-2 w-full font-bold h-[50]"
    ></Button>
    <Button
      [nsRouterLink]="['/input-binding-demo', 'Angular']"
      [queryParams]="{ language: 'en' }"
      text="Input Binding Demo"
      [borderRadius]="borderRadius"
      [fontSize]="fontSize"
      padding="0"
      backgroundColor="#4CAF50"
      class="text-white mt-2 w-full font-bold h-[50]"
    ></Button>
  </StackLayout>
  <ListView row="1" [items]="items" backgroundColor="#efefef">
    <ng-template let-item="item">
      <StackLayout [nsRouterLink]="['/item2', item.id]" class="p-4">
        <Label [text]="item.name" class="text-lg text-center"></Label>
      </StackLayout>
    </ng-template>
  </ListView>
</GridLayout>