Categories

Thursday, March 28, 2024
#919814419350 therichposts@gmail.com
Angular 7.2.4Javascript

Tilt in Angular 7 working example

Hello to all, welcome to therichpost.com. In this post, I will tell you, Tilt in Angular 7 working example.

If you are new in Angular then you can check my old posts related to Angular 7.

In this post, I am using Tilt effect in Angular 7.

Here is the code and please use carefully:


1. Very first, you need to run the below command into your terminal to add tilt js into your Angular 7 application:

$ npm install --save angular-tilt

1. After run above command, add below code into your Angular 7 fresh application:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AngularTiltModule } from 'angular-tilt';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
  AngularTiltModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

<div style="text-align:center">
 <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">


 <div style="margin: 0 auto;background:green; height:350px; width:350px; text-align:center; vertical-align:middle; color:#fff" class="container" aTilt 
    [tiltSettings]="tiltSettings">  
     <h1>
       Welcome to {{ title }}!
     </h1>
 </div>

</div>

If you have any query related to this post then please do comment below.

Jassa jatt

Thank you

therichpost
the authortherichpost
Hello to all. Welcome to therichpost.com. Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know WordPress, Core php, Angularjs, Angular 14, Angular 15, Angular 16, Angular 17, Bootstrap 5, Nodejs, Laravel, Codeigniter, Shopify, Squarespace, jQuery, Google Map Api, Vuejs, Reactjs, Big commerce etc.

5 Comments

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.