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