Home Angular 7.2.4 Tilt in Angular 7 working example

Tilt in Angular 7 working example

by therichpost
5 comments
angular7

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

You may also like

5 comments

alpana October 8, 2020 - 6:47 am

How to use this [tiltSettings]=”tiltSettings”, You have not tell here how to use options for tilt, Like image scale

Reply
Ajay Malhotra October 8, 2020 - 4:25 pm

I will update you.

Reply
xavi December 17, 2020 - 12:37 pm

Hello
sam problem here
i dnt know how to use options
Could someone help? thanks

Reply
dads in space February 23, 2021 - 9:04 pm

update pls

Reply
Praga September 11, 2021 - 8:25 am

use this in .ts
tiltSettings : any;

ngOnInit(){
this.tiltSettings = { max: 2, speed: 800, glare: true, maxGlare: 0.5 };
}

Reply

Leave a Comment

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