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⭐

Heroku

This site is built on Heroku

Join the ranks of developers at Salesforce, Airbase, DEV, and more who deploy their mission critical applications on Heroku. Sign up today and launch your first app!

Get Started

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs