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⭐

Image of Datadog

How to Diagram Your Cloud Architecture

Cloud architecture diagrams provide critical visibility into the resources in your environment and how they’re connected. In our latest eBook, AWS Solution Architects Jason Mimick and James Wenzel walk through best practices on how to build effective and professional diagrams.

Download the Free eBook

Top comments (0)

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up