A Component which provides SignIn and SignUp Module.
Fist you have to add this to your dependencies. Follow below Installation steps.
Generate new ionic project.
ng add @angular/material
npm install --save ionic-core-lib
Check you peer-dependencies warnings after npm install to make sure you are using a version in accordance to your Ionic version.
lib-signin component is a signin form to authenticate its users. The component contains a signin form with fields such as user name, password, and submit button to authenticate app users. It provides and google also.
import { IonicCoreLibModule } from 'ionic-core-lib';
@NgModule({
imports: [
IonicCoreLibModule
],
})
export class AppModule {}
<ion-content>
<lib-signin
(goToSignUpPage)="navigatePage($event)"
(clickFacebookBtn)="loginWithFacebook($event)"
(clickGoogleBtn)="loginWithGoogle($event)">
</lib-signin>
</ion-content>
-
Login with Facebook - Logging in with Facebook is a quick and convenient way to create accounts and log in to the app from different platforms. It is available for iOS , Android , the web , applications for computers and devices such as Smart TVs and IoT (internet of things) objects . Login with Facebook supports two scenarios: using authentication and asking for permissions to access user data . You can use Facebook login only for authentication, or for authentication and data access.
-
Login with Google - Google Sign-In is a secure authentication system that reduces the burden of login for your users, by enabling them to sign in with their Google Account.
-
(goToSignUpPage) - Redirect to signUp page.
-
(clickFacebookBtn) - When a user clicks on this button by logging in with Facebook, you can access a subset of the data that they have stored on Facebook. The request which fetches 'the permissions' will allow them to access the data. Based on 'the permissions' the user has certain access to information depending on the privacy settings of the person and the request they make.
-
(clickGoogleBtn) - When a user clicks on the Login button with Google, the user is navigated to Google to give the app permission. In response, the user receives a Token key and other personal details.
lib-signup component is a signup form to signup its users. The component contains a signup form with fields such as user name, First name, Last name, Email, password, and submit button to signup new users.
import { IonicCoreLibModule } from 'ionic-core-lib';
@NgModule({
imports: [
IonicCoreLibModule
],
})
export class AppModule {}
<ion-content>
<lib-signup (goBackToSignIn)="navigatePage($event)"></lib-signup>
</ion-content>
-
Chat view - Displays messages that have been sent or received using the chat function.
-
Message input box - Enter the message to be sent.
-
Send Message button - Sends the message entered in the message input box.
(goToSignInPage) - Redirect to signIn page.
The Chat component is used to display real-time and past chat logs between service agents and customers.
import { IonicCoreLibModule } from 'ionic-core-lib';
@NgModule({
imports: [
IonicCoreLibModule
],
})
export class AppModule {}
<ion-content>
<lib-chat
(sendMessage)="sendMsg($event)"
[messageList]="messageList"
[currentUserId]="currentUserId">
</lib-chat>
</ion-content>
-
(sendMessage) = "functionname($event)" - This event emmiter use for send new message. you can get your message using event.newMsg.
set your code like below
functionName(event) { this.messageList.push({ id: 1, user: 'Yash', createdAt: new Date().getTime(), msg: event.newMsg, userId: 101 });
-
[messageList] = "messageList"
set your code like below
messageList = [ { id: 1, user: 'Yash', createdAt: 1554090956000, msg: 'Hey Whats up?', userId: 101 }, ];
-
[currentUserId] = "currentUserId" - pass your current login userId.
The Cart component is responsible for storing and managing a customer's shopping carts. It maintains the customer's current shopping cart that is used during the purchase process, and it stores any other shopping carts that have been persisted by that customer.
import { IonicCoreLibModule } from 'ionic-core-lib';
@NgModule({
imports: [
IonicCoreLibModule
],
})
export class AppModule {}
<ion-content>
<lib-cart
[productList]="productList"
(payWithPaypal)="paymentWithPaypal($event)"
(payWithBitcoin)="paymentWithBitcoin($event)"
(payWithSquare)="paymentWithSquare($event)"
(payWithZelle)="paymentWithZelle($event)">
</lib-cart>
</ion-content>
-
(payWithPaypal) = "functionname($event)" - This event emmiter use for pay payment using Paypal.
-
(payWithBitcoin) = "functionname($event)" - This event emmiter use for pay payment using Bitcoin.
-
(payWithSquare) = "functionname($event)" - This event emmiter use for pay payment using Square.
-
(payWithZelle) = "functionname($event)" - This event emmiter use for pay payment using Zelle.
-
[productList] = "productList"
set your code like below
productList = [ { uid: 1, name: 'Classic', price: '5', category: 'Pizza', image: '', qty: 1, totalPrice: 0, index: 0 }, { uid: 2, name: 'Tuna', price: '9', category: 'Pizza', image: '', qty: 1, totalPrice: 0, index: 1 }, { uid: 3, name: 'Hawai', price: '7', category: 'Pizza', image: '', qty: 1, totalPrice: 0, index: 2 }, { uid: 4, name: 'Mac & Cheese', price: '8', category: 'Pasta', image: '', qty: 1, totalPrice: 0, index: 3 }, { uid: 5, name: 'Bolognese', price: '6', category: 'Pasta', image: '', qty: 1, totalPrice: 0, index: 4 }, { uid: 6, name: 'Ham & Egg', price: '8', category: 'Salad', image: '', qty: 1, totalPrice: 0, index: 5 }, { uid: 7, name: 'Basic', price: '5', category: 'Salad', image: '', qty: 1, totalPrice: 0, index: 6 }, { uid: 8, name: 'Ceaser', price: '9', category: 'Salad', image: '', qty: 1, totalPrice: 0, index: 7 }, { uid: 9, name: 'Salami', price: '8', category: 'Pizza', image: '', qty: 1, totalPrice: 0, index: 8 }, ];
## Theming
For theming purpose this css is used. This variable you can use for all components.
```python
color: var(--ion-text-color)
- Set color in --ion-text-color in the variables.scss and set in color.
--background:var(--ion-background-color)
- Set color in --ion-background-color in the variables.scss and set in --background.
To learn more about theming in app please go to