DEV Community

Cover image for Lintree Clone in Angular
Manthan Ankolekar
Manthan Ankolekar

Posted on

Lintree Clone in Angular

Install Angular cli to create Angular project

npm install -g @angular/cli
Enter fullscreen mode Exit fullscreen mode

Run the cli command to create new Angular Project

ng new lintree-clone-angular
Enter fullscreen mode Exit fullscreen mode

Navigate to the project

cd lintree-clone-angular
Enter fullscreen mode Exit fullscreen mode

Project Structure

project structure

Let's now start with updating app.component.html according to below

<main>
  <div class="container" *ngFor="let item of data">
    <div class="header-container">
      <div class="share-button">
        <a (click)="shareUrl()">
          <svg width="16" height="16" viewBox="0 0 16 16" enable-background="new 0 0 24 24" class="sc-gKsewC iPWGYb">
            <path fill-rule="evenodd" clip-rule="evenodd"
              d="M10.6464 3.85347L11 4.20702L11.7071 3.49992L11.3536 3.14636L8.35355 0.146362H7.64645L4.64645 3.14636L4.29289 3.49992L5 4.20702L5.35355 3.85347L7.5 1.70702V9.49992V9.99992H8.5V9.49992V1.70702L10.6464 3.85347ZM1 5.49994L1.5 4.99994H4V5.99994H2V14.9999H14V5.99994H12V4.99994H14.5L15 5.49994V15.4999L14.5 15.9999H1.5L1 15.4999V5.49994Z"
              fill="currentColor"></path>
          </svg>
        </a>
      </div>
    </div>
    <div class="image-container">
      <img ngSrc="/assets/images/picture.png" width="100" height="200" priority alt="">
    </div>
    <div class="text-container">
      <h1>@{{item.name}}</h1>
      <h6>{{item.desc}}</h6>
    </div>

    <div class="tile-container" *ngFor="let item of data[0].links">
      <a class="tile" href={{item.url}} target="_blank">
        <div class="icon">
          <img src={{item.icon}} alt="">
        </div>
        <p>{{item.name}}</p>
        <a class="tile-share-button" href={{item.url}} target="_blank" aria-label="link">
          <svg width="18" height="18" viewBox="0 0 16 16" enable-background="new 0 0 24 24" class="sc-gKsewC iPWGYb">
            <path fill-rule="evenodd" clip-rule="evenodd"
              d="M10.6464 3.85347L11 4.20702L11.7071 3.49992L11.3536 3.14636L8.35355 0.146362H7.64645L4.64645 3.14636L4.29289 3.49992L5 4.20702L5.35355 3.85347L7.5 1.70702V9.49992V9.99992H8.5V9.49992V1.70702L10.6464 3.85347ZM1 5.49994L1.5 4.99994H4V5.99994H2V14.9999H14V5.99994H12V4.99994H14.5L15 5.49994V15.4999L14.5 15.9999H1.5L1 15.4999V5.49994Z"
              fill="currentColor"></path>
          </svg>
        </a>
      </a>
    </div>
  </div>
</main>
<footer>
  <div class="footer-container" *ngFor="let item of data">
    <p>&copy; 2023 Linktree Clone by {{item.name}}</p>
  </div>
</footer>
Enter fullscreen mode Exit fullscreen mode

Next add in app.component.scss mentioned below

main {
    display: flex;
    align-items: center;
    flex-direction: column;
}

.container {
    width: 91%;
    max-width: 680px;
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.text-container {
    text-align: center;

    h1 {
        font-size: 20px;
    }

    h6 {
        margin-top: 0;
        font-size: 18px;
        margin-bottom: 30px;
    }
}

.header-container {
    display: flex;
    justify-content: flex-end;
    width: 100%;

    .share-button {
        width: 40px;
        height: 40px;
        border-radius: 20px;
        background-color: rgb(240, 240, 240);
    }

    .share-button svg {
        margin-left: 12px;
        margin-top: 10px;
        color: rgb(0, 0, 0);
    }
}

.image-container {
    margin-top: 10px;
    height: 96px;
    width: 96px;
    border-radius: 48px;
    overflow: hidden;
}

.image-container img {
    height: 100%;
}

.tile-container {
    width: 100%;
    background-color: rgb(37, 37, 37);
    margin: 7px;
    border-radius: 17px;
    display: flex;
    justify-content: space-between;

    a {
        text-decoration: none;
        color: rgb(240, 240, 240);
    }

    .tile {
        width: 100%;
        background-color: rgb(37, 37, 37);
        border-radius: 17px;
        display: flex;
        justify-content: space-between;
    }

    .icon {
        margin: 15px 15px;
        width: 44px;
        height: 44px;
    }

    .tile:hover {
        transition: cubic-bezier(.07, 1.41, .82, 1.41) 0.2s;
        transform: scale(1.02);
    }

    .tile-share-button {
        margin: 15px;
        width: 40px;
        height: 40px;
        border-radius: 20px;
        background-color: rgb(52, 52, 52);
    }

    .tile-share-button svg {
        margin-left: 12px;
        margin-top: 10px;
    }

    p {
        font-size: 20px;
    }

}

.footer-container {
    margin: 10px;
    display: flex;
    justify-content: center;
    align-items: center;

    p {
        margin: 10px;
    }
}
Enter fullscreen mode Exit fullscreen mode

Updateapp.component.ts with below

import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  title = 'linktree-clone-angular';

  data: any;
  name: any;
  href: any;

  constructor(private http: HttpClient, private router: Router){}

  ngOnInit() {
    this.http.get('/assets/data.json').subscribe(data => {
      this.data = data;
      this.name = data;
      console.log(this.data);
    });
  }

  shareUrl(){
    if (navigator.share) {
      navigator.share({
        title: 'My Angular App',
        text: 'Check out this awesome Angular app',
        url: window.location.href
      });
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

Modify app.module.ts as shown below

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NgOptimizedImage } from '@angular/common';
import { HttpClientModule } from '@angular/common/http';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NgOptimizedImage,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
Enter fullscreen mode Exit fullscreen mode

Adding all details indata.json

[
    {
        "name": "Manthanank",
        "desc":"Front End Developer",
        "iconurl": "/assets/images/picture.png",
        "links": [
            {
                "name": "Website",
                "icon": "/assets/svg/website.svg",
                "url": "http://manthanank.web.app"
            },
            {
                "name":"Twitter",
                "icon": "/assets/svg/twitter.svg",
                "url": "https://twitter.com/manthan_ank"
            },
            {
                "name":"LinkedIn",
                "icon": "/assets/svg/linkedin.svg",
                "url": "https://www.linkedin.com/in/manthanank"
            },
            {
                "name":"GitHub",
                "icon": "/assets/svg/github.svg",
                "url": "https://github.com/manthanank"
            },
            {
                "name":"Facebook",
                "icon": "/assets/svg/facebook.svg",
                "url": "https://www.facebook.com/manthanank/"
            },
            {
                "name":"YouTube",
                "icon": "/assets/svg/youtube.svg",
                "url": "https://www.youtube.com/@manthanank"
            },
            {
                "name":"Instagram",
                "icon": "/assets/svg/instagram.svg",
                "url": "https://www.instagram.com/manthan_ank/"
            }
        ]
    }
]
Enter fullscreen mode Exit fullscreen mode

Here is how assets folder looks

assets folder

Demo Link: https://linktree-clone-angular.vercel.app/

Repo Link: GitHub - manthanank/linktree-clone-angular: Linktree Clone in Angular

Preview:

peview

Please support and Don't forget to give star⭐

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay