About Miranda Hotel

Miranda Hotel - Angular 11 Template

Development Setup

In order to kickstart the development of your web app with Miranda Hotel, the very first thing is to setup an Angular development environment.

Name Description
angular.json Used for configuration of project specific settings. You can add external styles and scripts, change the output folder, add assets, add environment files and more.
e2e Will be used for end-to-end tests to ensure functionality for users before deploying.
node_modules All external modules used are here. Do not mess with this folder, as it is auto-generated by using npm install.
package.json Contains all dependencies used for production and development.
src Contains all Angular Typescript code, assets and basically everything the end user will have access to.
tslint.json Angular-CLI includes an automatic Typescript-Linter, which can be configured with this file.
  • Node.js and NPM : If NodeJS is not installed then download it from https://nodejs.org/. NPM comes bundled with Node.js
  • angular-cli : You can install angular-cli by executing from your command window npm install -g @angular/cli. More details can be found here https://github.com/angular/angular-cli
  • Before proceding you'll need to install npm packages. You can do this by running npm install from the root of your project to install all the necessary dependencies.
  • Run ng serve for a dev server. Navigate to localhost:4200/. The app will autometically reload if you change any of the source files.
  • Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.
  • To get more help on the angular-cli use ng --help or go check out the Angular-CLI README.

Pages

  • Homepage v1 (/app/components/pages/home)
  • Homepage v2 (/app/components/pages/home-v2)
  • Homepage v3 (/app/components/pages/home-v3)
  • Room Grid (/app/components/pages/room-grid)
  • Room List (/app/components/pages/room-list)
  • Room Details (/app/components/pages/room-details)
  • Blog Grid (/app/components/pages/blog)
  • Blog Standard (/app/components/pages/blog-standard)
  • Blog Details (/app/components/pages/blog-details)
  • Contact Us (/app/components/pages/contact)
  • About Us (/app/components/pages/about)
  • Gallery (/app/components/pages/gallery)
  • Restaurants (/app/components/pages/restaurant)
  • Places (/app/components/pages/places)
  • Place Details (/app/components/pages/places-details)
  • Offers (/app/components/pages/offers)
  • Menu (/app/components/pages/menu)
  • Error Page (/app/components/pages/error-page)
  • Go to /app/app.routing.modules.ts and see the urls & find the appropriate modules for every pages.

Template Features:
  • Built on Angular 11
  • Attractive Homepage
  • Responsive in Any Device
  • Retina Ready
  • Creative and Beautiful Layout
  • Fast, Lightweight & Powerful
  • Smooth Transition Effects
  • ES6+
  • Clean And Professional Coding
  • Creative and Modern Design
  • Bootstrap (v4.6.0)
  • Simple Client-side Routing (page based)
  • Google Font and Icon Used
  • Integrated With IcoFont and FlatIcon
  • Easily Customizable
  • Well Commented Code
  • Detailed Documentation

Dependencies

Here are the dependencies list which being used in the Miranda Hotel Angular Template:

"dependencies": {
    "@agm/core": "^1.0.0",
    "@angular/animations": "~11.2.5",
    "@angular/common": "~11.2.5",
    "@angular/compiler": "~11.2.5",
    "@angular/core": "~11.2.5",
    "@angular/forms": "~11.2.5",
    "@angular/platform-browser": "~11.2.5",
    "@angular/platform-browser-dynamic": "~11.2.5",
    "@angular/router": "~11.2.5",
    "@auth0/angular-jwt": "^5.0.2",
    "@ng-bootstrap/ng-bootstrap": "^9.0.2",
    "angular-crumbs": "^3.0.1",
    "angular2-jwt": "^0.2.3",
    "bootstrap": "^4.6.0",
    "imagesloaded": "^4.1.4",
    "jquery": "^3.6.0",
    "magnific-popup": "^1.1.0",
    "masonry-layout": "^4.2.2",
    "ng-masonry-grid": "^1.3.0",
    "ng-nice-select": "^1.3.1",
    "ng-recaptcha": "^8.0.1",
    "ngx-pagination": "^5.0.0",
    "ngx-slick-carousel": "^0.5.1",
    "rxjs": "~6.6.0",
    "slick-carousel": "^1.8.1",
    "tslib": "^2.0.0",
    "zone.js": "~0.11.3"
},
"devDependencies": {
    "@angular-devkit/build-angular": "~0.1102.3",
    "@angular/cli": "~11.2.4",
    "@angular/compiler-cli": "~11.2.5",
    "@types/jasmine": "~3.6.0",
    "@types/jquery": "^3.5.5",
    "@types/node": "^12.11.1",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.1.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~4.1.5"
}
                    

Contact Form

This template supports a working Contact Form. However, you will need to do some adjustments to be able to get it working, follow the below steps to get it up and running

Step 1:

Find the sendmail.php file in your project root directory

// Your Email here
$email = example@example.com;
                 
Step 2:

Change the email to your recieving email


// Recaptcha settings
$use_recaptcha = false;
define("RECAPTCHA_V3_SECRET_KEY", 'Place_Your_Secret_Key_Here');
                 
Step 3:

Change the Secret Key to your Domain configuration


Step 4:

Navigate to app/components/pages/contact/content/content.html and look for re-captcha tag. You will need to change site key to your Domain configuration

// Recaptcha settings

                 

Step 5:

Navigate to app/components/services/contact.helper.service.ts and look for serviceURL on line 12. You will need to host the sendmail.php file on your server somewhere and add the link to the script here


Note: This feature does not work on a local environment

Fonts

By default, the template loads Archivo & Old Standard TT & Roboto font from Google Web Font Services, you can change the font with the one that suits you best.

Font code can be found in the "assets/css/style.css" file:

@import url("https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400;0,500;0,600;0,700;1,400;1,700&family=Old+Standard+TT:ital,wght@0,400;0,700;1,400&family=Roboto:wght@400;500;700&display=swap");
                

Credits