How can I migrate a web app with Angular v7 to mobile NativeScript app

Question

I made a simple web app with Angular v7 and I want to migrate it to a NativeScript mobile app .

I followed the instructions in https://docs.nativescript.org/angular/code-sharing/migrating-a-web-project#migrating-components but I am facing a difficulty.

The app is running in my Android mobile phone but it does not show the content because I need to adjust it properly for a mobile app. It shows auto-generated works. The problem is I do not know how I can do adjust properly the code since I cannot find a properly doc. Any help?

My code in app.component.html:

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
</div>
<weather-search></weather-search>
<weather-list></weather-list>

<router-outlet></router-outlet>

My code in weather-search.component.html:

<section class="weather-search">
    <form (ngSubmit)="onSubmit(f)" #f="ngForm">
        <div class="test_up">
            <label for="city" class="city">City</label>
            <input name="location" type="text" id="city" ngModel required>
        </div>
        <div class="test_down">
            <label for="countryCode" class="city">Country Code</label>
            <input name="countryCode" type="text" id="code" ngModel required>
        </div>
        <button type="submit">Add City</button>
    </form>
    <button (click)="onClickLocationData(f)">Get geolocation</button>
    <label for="latitude" class="map" *ngIf="latitude!=0">Latitude: {{latitude}} </label>
    <label for="longitude" class="map" *ngIf="longitude!=0">Longitude: {{longitude}} </label>
    <div id="map" class="mapLocation"></div>
</section>

My code in weather-list.component.html:

<section class="weather-list">
    <weather-item *ngFor="let weatherItem of weatherItems" [item]="weatherItem"></weather-item>
</section>

My code in weather-item.component.html:

<article class="weather-element">
    <div class="col-1"> 
        <h3>{{ weatherItem.cityName }}</h3>
        <p class="info">{{ weatherItem.description }}</p>
    </div>
    <div class="col-2"> 
        <span class="temperature">{{ weatherItem.temperature }}°C</span>
    </div>
</article>

Answer 1

As that document suggests as well, you have to create component.tns.html file as and other HTML elements are not available for mobile.

In your .tns.html file, you can replace with either StackLayout or GridLayout. You can refer to https://www.nslayouts.com/ to learn more about {NS} layouts.

in your weather-list.component.tns.html:

<StackLayout class="weather-list">
    <weather-item *ngFor="let weatherItem of weatherItems" [item]="weatherItem"></weather-item>
</StackLayout >

and in weather-item.component.tns.html

<StackLayout class="weather-element">
        <StackLayout>
            <Label text="{{ weatherItem.cityName }}"></Label>
            <Label text="{{ weatherItem.description }}"></Label>
        </StackLayout>
        <StackLayout>
            <Label text="{{ weatherItem.temperature }}"></Label>
        </StackLayout>
    </StackLayout>