Watchly | ANDROID + IOS + FIGMA | UI Kit | Ionic | Ecommerce Watch APP

Here is a complete settings example for the Watchly | ANDROID + IOS + FIGMA | UI Kit | Ionic | Ecommerce Watch APP:

App Name In the app.module.ts file, add the following code to set the app name:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicModule } from '@ionic/angular';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

App Icon In the app.component.ts file, add the following code to set the app icon:

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css']
})
export class AppComponent {
  constructor(private platform: Platform) {
    this.platform.ready().then(() => {
      this.platform.registerElement('icon', () => document.createElement('ion-icon'));
    });
  }
}

Figma Design In the styles.css file, add the following code to import the Figma design:

@import 'path/to/figma/design.css';

Ecommerce Configuration In the app.module.ts file, add the following code to configure the ecommerce features:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicModule } from '@ionic/angular';
import { AppRoutingModule } from './app-routing.module';
import { EcommerceModule } from 'path/to/ecommerce/module';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, EcommerceModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

Payment Gateway In the app.component.ts file, add the following code to configure the payment gateway:

import { Component } from '@angular/core';
import { PaymentGateway } from 'path/to/payment/gateway';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css']
})
export class AppComponent {
  constructor(private paymentGateway: PaymentGateway) {}

  pay() {
    this.paymentGateway.pay('amount', 'currency', 'paymentMethod');
  }
}

Product List In the product-list.component.ts file, add the following code to configure the product list:

import { Component } from '@angular/core';
import { ProductList } from 'path/to/product/list';

@Component({
  selector: 'app-product-list',
  templateUrl: 'product-list.component.html',
  styleUrls: ['product-list.component.css']
})
export class ProductListComponent {
  products = ProductList.getProducts();
}

Product Details In the product-details.component.ts file, add the following code to configure the product details:

import { Component } from '@angular/core';
import { ProductDetails } from 'path/to/product/details';

@Component({
  selector: 'app-product-details',
  templateUrl: 'product-details.component.html',
  styleUrls: ['product-details.component.css']
})
export class ProductDetailsComponent {
  product = ProductDetails.getProductDetails();
}

Cart In the cart.component.ts file, add the following code to configure the cart:

import { Component } from '@angular/core';
import { Cart } from 'path/to/cart';

@Component({
  selector: 'app-cart',
  templateUrl: 'cart.component.html',
  styleUrls: ['cart.component.css']
})
export class CartComponent {
  cartItems = Cart.getCartItems();
}

Checkout In the checkout.component.ts file, add the following code to configure the checkout:

import { Component } from '@angular/core';
import { Checkout } from 'path/to/checkout';

@Component({
  selector: 'app-checkout',
  templateUrl: 'checkout.component.html',
  styleUrls: ['checkout.component.css']
})
export class CheckoutComponent {
  checkoutItems = Checkout.getCheckoutItems();
}

Note: Replace path/to/ with the actual path to the respective files or modules.

Here are the features of Watchly | ANDROID + IOS + FIGMA | UI Kit | Ionic | Ecommerce Watch APP:

1. Clean Code & Clean Design: The UI Kit has clean and organized code and design.
2. Flexible UI: The UI is flexible and can be easily customized.
3. Smooth Transition Effects: The UI Kit has smooth transition effects.
4. Font Awesome Icons: The UI Kit uses Font Awesome icons.
5. Mobile and Tablet Support: The UI Kit is compatible with mobile and tablet devices.
6. Responsive Design: The UI Kit has a responsive design.
7. SSP Font added: The UI Kit includes the SSP font.
8. Documentation Included: The UI Kit includes documentation.
9. Unique and Creative Design: The UI Kit has a unique and creative design.
10. Easy to Customize: The UI Kit is easy to customize.
11. Animation Controller: The UI Kit includes an animation controller.
12. 83 Gorgeous Screens: The UI Kit includes 83 high-quality screens.
13. Support Ionic Latest Version: The UI Kit supports the latest version of Ionic.
14. Well-organized and Structured Layer: The UI Kit has a well-organized and structured layer.
15. Figma, Xd, Sketch File Added (FREE): The UI Kit includes files for Figma, Xd, and Sketch, free of charge.

Additionally, the UI Kit also includes:

• Ionic Source UI Code
• Lifetime Free Upgrade Version
• Code Flexibility
• ReactNative Version Available
• Flutter Version Available
• Contact Us information
• Join us for the latest updates
• Changelog and Update History