event.service.ts file

import { Injectable } from '@angular/core';

@Injectable()
export class EventService{
    getEvents(){
        return EVENTS;
    }
}

const EVENTS = [
    {
      id: 1,
      name: 'Angular Connect',
      date: '9/26/2036',
      time: '10:00 am',
      price: 599.99,
      imageUrl: '/assets/images/angularconnect-shield.png',
      onlineUrl: 'http://google.com',
      sessions: [
        {
          id: 1,
          name: "Using Angular 4 Pipes",
          presenter: "Peter Bacon Darwin",
          duration: 1,
          level: "Intermediate",
          abstract: `Learn all about the new pipes in Angular 4, both 
          how to write them, and how to get the new AI CLI to write 
          them for you. Given by the famous PBD, president of Angular 
          University (formerly Oxford University)`,
          voters: ['bradgreen', 'igorminar', 'martinfowler']
        },
        {
          id: 2,
          name: "Getting the most out of your dev team",
          presenter: "Jeff Cross",
          duration: 1,
          level: "Intermediate",
          abstract: `We all know that our dev teams work hard, but with 
          the right management they can be even more productive, without 
          overworking them. In this session I'll show you how to get the 
          best results from the talent you already have on staff.`,
          voters: ['johnpapa', 'bradgreen', 'igorminar', 'martinfowler']
        },
        {
          id: 3,
          name: "Angular 4 Performance Metrics",
          presenter: "Rob Wormald",
          duration: 2,
          level: "Advanced",
          abstract: `Angular 4 Performance is hot. In this session, we'll see 
          how Angular gets such great performance by preloading data on 
          your users devices before they even hit your site using the 
          new predictive algorithms and thought reading software 
          built into Angular 4.`,
          voters: []
        },
        {
          id: 4,
          name: "Angular 5 Look Ahead",
          presenter: "Brad Green",
          duration: 2,
          level: "Advanced",
          abstract: `Even though Angular 5 is still 6 years away, we all want 
          to know all about it so that we can spend endless hours in meetings 
          debating if we should use Angular 4 or not. This talk will look at 
          Angular 6 even though no code has yet been written for it. We'll 
          look at what it might do, and how to convince your manager to 
          hold off on any new apps until it's released`,
          voters: []
        },
        {
          id: 5,
          name: "Basics of Angular 4",
          presenter: "John Papa",
          duration: 2,
          level: "Beginner",
          abstract: `It's time to learn the basics of Angular 4. This talk 
          will give you everything you need to know about Angular 4 to 
          get started with it today and be building UI's for your self 
          driving cars and butler-bots in no time.`,
          voters: ['bradgreen', 'igorminar']
        }
      ]
    },
    {
      id: 2,
      name: 'ng-nl',
      date: '4/15/2037',
      time: '9:00 am',
      price: 950.00,
      imageUrl: '/assets/images/ng-nl.png',
      onlineUrl: 'http://google.com',
      location: {
        address: 'The NG-NL Convention Center & Scuba Shop',
        city: 'Amsterdam',
        country: 'Netherlands'
      },
      sessions: [
        {
          id: 1,
          name: "Testing Angular 4 Workshop",
          presenter: "Pascal Precht & Christoph Bergdorf",
          duration: 4,
          level: "Beginner",
          abstract: `In this 6 hour workshop you will learn not only how to test Angular 4, 
          you will also learn how to make the most of your team's efforts. Other topics
          will be convincing your manager that testing is a good idea, and using the new
          protractor tool for end to end testing.`,
          voters: ['bradgreen', 'igorminar']
        },
        {
          id: 2,
          name: "Angular 4 and Firebase",
          presenter: "David East",
          duration: 3,
          level: "Intermediate",
          abstract: `In this workshop, David East will show you how to use Angular with the new
          ultra-real-time 5D Firebase back end, hosting platform, and wine recommendation engine.`,
          voters: ['bradgreen', 'igorminar', 'johnpapa']
        },
        {
          id: 3,
          name: "Reading the Angular 4 Source",
          presenter: "Patrick Stapleton",
          duration: 2,
          level: "Intermediate",
          abstract: `Angular 4's source code may be over 25 million lines of code, but it's really 
          a lot easier to read and understand then you may think. Patrick Stapleton will talk
          about his secretes for keeping up with the changes, and navigating around the code.`,
          voters: ['martinfowler']
        },
        {
          id: 4,
          name: "Hail to the Lukas",
          presenter: "Lukas Ruebbelke",
          duration: 1,
          level: "Beginner",
          abstract: `In this session, Lukas will present the 
          secret to being awesome, and how he became the President 
          of the United States through his amazing programming skills, 
          showing how you too can be success with just attitude.`, 
          voters: ['bradgreen']
        },
      ]
    },
    {
      id: 3,
      name: 'ng-conf 2037',
      date: '5/4/2037',
      time: '10:00 am',
      price: 759.00,
      imageUrl: '/assets/images/ng-conf.png',
      location: {
        address: 'The Palatial America Hotel',
        city: 'Salt Lake City',
        country: 'USA'
      },
      sessions: [
        {
          id: 1,
          name: "How Elm Powers Angular 4",
          presenter: "Murphy Randle",
          duration: 2,
          level: "Intermediate",
          abstract: `We all know that Angular is written in Elm, but did you
          know how the source code is really written? In this exciting look
          into the internals of Angular 4, we'll see exactly how Elm powers
          the framework, and what you can do to take advantage of this knowledge.`,
          voters: ['bradgreen', 'martinfowler', 'igorminar']
        },
        {
          id: 2,
          name: "Angular and React together",
          presenter: "Jamison Dance",
          duration: 2,
          level: "Intermediate",
          abstract: `React v449.6 has just been released. Let's see how to use 
          this new version with Angular to create even more impressive applications.`,
          voters: ['bradgreen', 'martinfowler']
        },
        {
          id: 3,
          name: "Redux Woes",
          presenter: "Rob Wormald",
          duration: 1,
          level: "Intermediate",
          abstract: `Everyone is using Redux for everything from Angular to React to 
          Excel macros, but you're still having trouble grasping it? We'll take a look
          at how farmers use Redux when harvesting grain as a great introduction to 
          this game changing technology.`,
          voters: ['bradgreen', 'martinfowler', 'johnpapa']
        },
        {
          id: 4,
          name: "ng-wat again!!",
          presenter: "Shai Reznik",
          duration: 1,
          level: "Beginner",
          abstract: `Let's take a look at some of the stranger pieces of Angular 4,
          including neural net nets, Android in Androids, and using pipes with actual pipes.`,
          voters: ['bradgreen', 'martinfowler', 'igorminar', 'johnpapa']
        },
        {
          id: 5,
          name: "Dressed for Success",
          presenter: "Ward Bell",
          duration: 2,
          level: "Beginner",
          abstract: `Being a developer in 2037 is about more than just writing bug-free code. 
          You also have to look the part. In this amazing expose, Ward will talk you through
          how to pick out the right clothes to make your coworkers and boss not only
          respect you, but also want to be your buddy.`,
          voters: ['bradgreen', 'martinfowler']
        },
        {
          id: 6,
          name: "These aren't the directives you're looking for",
          presenter: "John Papa",
          duration: 2,
          level: "Intermediate",
          abstract: `Coinciding with the release of Star Wars Episode 18, this talk will show how
          to use directives in your Angular 4 development while drawing lessons from the new movie,
          featuring all your favorite characters like Han Solo's ghost and Darth Jar Jar.`,
          voters: ['bradgreen', 'martinfowler']
        },
      ]
    },
    {
      id: 4,
      name: 'UN Angular Summit',
      date: '6/10/2037',
      time: '8:00 am',
      price: 800.00,
      imageUrl: '/assets/images/basic-shield.png',
      location: {
        address: 'The UN Angular Center',
        city: 'New York',
        country: 'USA'
      },
      sessions: [
        {
          id: 1,
          name: "Diversity in Tech",
          presenter: "Sir Dave Smith",
          duration: 2,
          level: "Beginner",
          abstract: `Yes, we all work with cyborgs and androids and Martians, but 
          we probably don't realize that sometimes our internal biases can make it difficult for
          these well-designed coworkers to really feel at home coding alongside us. This talk will
          look at things we can do to recognize our biases and counteract them.`,
          voters: ['bradgreen', 'igorminar']
        },
        {
          id: 2,
          name: "World Peace and Angular",
          presenter: "US Secretary of State Zach Galifianakis",
          duration: 2,
          level: "Beginner",
          abstract: `Angular has been used in most of the major peace brokering that has
          happened in the last decade, but there is still much we can do to remove all
          war from the world, and Angular will be a key part of that effort.`,
          voters: ['bradgreen', 'igorminar', 'johnpapa']
        },
        {
          id: 3,
          name: "Using Angular with Androids",
          presenter: "Dan Wahlin",
          duration: 3,
          level: "Advanced",
          abstract: `Androids may do everything for us now, allowing us to spend all day playing 
          the latest Destiny DLC, but we can still improve the massages they give and the handmade
          brie they make using Angular 4. This session will show you how.`,
          voters: ['igorminar', 'johnpapa']
        },
      ]
    },
    {
      id: 5,
      name: 'ng-vegas',
      date: '2/10/2037',
      time: '9:00 am',
      price: 400.00,
      imageUrl: '/assets/images/ng-vegas.png',
      location: {
        address: 'The Excalibur',
        city: 'Las Vegas',
        country: 'USA'
      },
      sessions: [
        {
          id: 1,
          name: "Gambling with Angular",
          presenter: "John Papa",
          duration: 1,
          level: "Intermediate",
          abstract: `No, this talk isn't about slot machines. We all know that 
          Angular is used in most waiter-bots and coke vending machines, but
          did you know that was also used to write the core engine in the majority
          of voting machines? This talk will look at how all presidential elections
          are now determined by Angular code.`,
          voters: ['bradgreen', 'igorminar']
        },
        {
          id: 2,
          name: "Angular 4 in 60ish Minutes",
          presenter: "Dan Wahlin",
          duration: 2,
          level: "Beginner",
          abstract: `Get the skinny on Angular 4 for anyone new to this great new technology.
          Dan Wahlin will show you how you can get started with Angular in 60ish minutes, 
          guaranteed!`,
          voters: ['bradgreen', 'igorminar', 'johnpapa']
        }
      ]
    }
  ]

import service file in app.module file

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

import { EventsAppComponent } from './events-app.component';
import { EventListComponent } from './events/event-list.component';
import { EventThumbnailComponent } from './events/event-thumbnail.component';
import { NavBarComponent } from './nav/navbar-component';
import { EventService } from './events/shared/event.service';

@NgModule({
  declarations: [
    EventsAppComponent,
    EventListComponent,
    EventThumbnailComponent,
    NavBarComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [EventService],
  bootstrap: [EventsAppComponent]
})
export class AppModule { }

Import service file and inject into event-list.component.ts

import { EventService } from './shared/event.service';
import { Component, OnInit } from '@angular/core';

@Component({
    selector: "events-list",
    template: `
    <div>
    <h2>Upcoming Angular Evnets</h2>
        <hr>
        <div class="row">
            <div class="col-md-5" *ngFor="let event of events">
                <event-thumbnail  [event]="event"></event-thumbnail>
            </div>
        </div>
    </div>
    `
})


export class EventListComponent implements OnInit{

    events: any[];

    constructor(private eventService: EventService){
        
    }

    ngOnInit(){
        this.events = this.eventService.getEvents();
    }

}

event-thumbnail.component.ts file

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
    selector: 'event-thumbnail',
    template: `        
        <div class="well thumbnail">
            <h2>{{event?.name}}</h2>
            <div>Date: {{event?.date}}</div>
            <div [ngStyle]="getStartTimeStyle()" 
            [ngSwitch]="event?.time">
                Time: {{event?.time}}
                <span *ngSwitchCase="'8:00 am'">(Early Start)</span>
                <span *ngSwitchCase="'10:00 am'">(Late Start)</span>
                <span *ngSwitchDefault>(Normal Start)</span>
            </div>
            <div>price: \${{event?.price}}</div>
            <!-- <div>time: {{event?.time}}</div> -->
            <div *ngIf="event?.location">
                <span>Location: {{event?.location?.address}}</span>
                <span> </span>
                <span>{{event?.location?.city}}, {{event?.location?.country}}</span>
            </div>
            <div *ngIf="event?.onlineUrl">
                Online Url: {{event?.onlineUrl}}
            </div>
            
        </div>

    `,
    styles : [`
        .green{color: green !important}
        .bold{font-weight: bold;}
        .thumbnail{min-height: 210px;}
    `]
})

export class EventThumbnailComponent{
    @Input() event: any;

    getStartTimeStyle():any{
        if(this.event && this.event.time === '8:00 am')
            return {color: '#003300', 'font-weight': 'bold'}
        return {}
    }
}

The post Creating your first service in Angular first appeared on Bipon's Diary.

import { HttpClientModule } from '@angular/common/http'  
imports: [
    HttpClientModule,
  ],

Step 2: data.service.ts file

import { Observable, of } from 'rxjs';
import { HttpClient } from '@angular/common/http';

constructor(private http: HttpClient) { }

  postUserSettingsForm(userSettings: UserSettings): Observable<any>{
    return this.http.post('url', userSettings)
  }

The post HTTP access using HttpClient in Angular first appeared on Bipon's Diary.

import { Observable } from 'rxjs';

//subscriptionTypes = ['one', 'two', 'three']
subscriptionTypes$: Observable<string[]>

 ngOnInit() {
    this.subscriptionTypes$ = this.dataService.getSubscriptionTypes();
  }

Step 2: data.service.ts file

import { Observable, of } from 'rxjs';

 getSubscriptionTypes(): Observable<string[]>{
    return of(['Monthly', 'Annual', 'Lifetime']);
  }

Step 3: user-settings-form.component.html file

<div class="form-group">
        <label for="subscriptionType">Subscription Type</label>
        <select class="form-control" id="subscriptionType" 
           name="subscriptionType" [(ngModel)]="userSettings.subscriptionType">
                <option *ngFor="let type of subscriptionTypes$ | async">
                        {{type}}
                </option>
        </select>
    </div>

The post Retrieving data for Select elements first appeared on Bipon's Diary.

import user-settings file

import { UserSettings } from './user-settings';
import { Injectable } from '@angular/core';
import { Observable, of } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  constructor() { }

  postUserSettingsForm(userSettings: UserSettings): Observable<any>{  
    return of(userSettings);
  }
} 

Step 2:
in user-settings-form.component.ts file
import bellow those two files

import { DataService } from './../data/data.service';
import { UserSettings } from './../data/user-settings';

constructor(private dataService: DataService) { }
  onSubmit(form: NgForm){
    console.log('in onSubmmit: ', form.value);
       this.dataService.postUserSettingsForm(this.userSettings).subscribe(
         result => console.log('success: ', result),
         error => console.log('error: ', error)
       );
  }

Step 3: in user-settings-form.component.html file

<form #form="ngForm" (ngSubmit)="onSubmit(form)">
    <div class="form-group">
        <label for="name">Name</label>
        <input id="name" name="name" class="form-control" [(ngModel)]="userSettings.name" />
    </div>
</form>

{{userSettings | json}}

The post Creating a Service in Angular first appeared on Bipon's Diary.

টাইপস্ক্রিপ্ট, যেখানে আমরা ভেরিয়েবল, ফাংশন প্যারামিটার এবং অবজেক্টের বৈশিষ্ট্যগুলির ধরণ নির্দিষ্ট করতে পারি।

আমরা :Type ব্যবহার করে প্রকারটি নির্দিষ্ট করতে পারি। যেমন – ভেরিয়েবল, প্যারামিটার বা প্রপার্টি নামের পরে। কোলন পরে একটি স্পেস হবে । টাইপস্ক্রিপ্টে জাভাস্ক্রিপ্টের সমস্ত প্রিমিটিভ টাইপ – সংখ্যা, স্ট্রিং এবং বুলিয়ান অন্তর্ভুক্ত।

নিম্নলিখিত উদাহরণটি বিভিন্ন ডেটা প্রকারের সাথে ভেরিয়েবল ঘোষণা করে:

উদাহরণ: টাইপস্ক্রিপ্টে  টাইপ Annotation এর প্রকারভেদ 

var age: number = 32; // number variable

var name: string = “John”;// string variable

var isUpdated: boolean = true;// Boolean variable

উপরের উদাহরণে, প্রতিটি ভেরিয়েবল তাদের ডেটা টাইপ দিয়ে ঘোষণা করা হয়। এগুলি টাইপস্ক্রিপ্ট Annotation। কোনও ভেরিয়েবলের ঘোষিত ডেটা টাইপ ব্যতীত অন্য কোনও ডেটা টাইপ ব্যবহার করে আপনি মানটি পরিবর্তন করতে পারবেন না। আপনি যদি এটির চেষ্টা করে থাকেন তবে টাইপস্ক্রিপ্ট কম্পাইলার একটি এরর প্রদর্শন করবে। এটি জাভাস্ক্রিপ্ট এররগুলি ধরতে সহায়তা করে। উদাহরণস্বরূপ, যদি আপনি উপরের উদাহরণে কোনও বয়স বা নাম্বার এ একটি নাম নির্ধারণ করেন তবে এটি একটি এরর দেয়।

টাইপস্ক্রিপ্ট টাইপ Annotation চেকিং প্রয়োগ করতে ব্যবহৃত হয়। টাইপ স্ক্রিপ্টে টাইপ Annotation  ব্যবহার করা বাধ্যতামূলক নয়। তবে টাইপস্ক্রিপ্ট Annotation টাইপ পরীক্ষা করতে কম্পাইলারকে সহায়তা করে এবং ডেটা টাইপ এর সাথে সম্পর্কিত এররগুলি এড়াতে সহায়তা করে। আপনার কোডে কাজ করা ভবিষ্যতের ডেভেলপারদের দ্বারা সহজে বুঝার জন্য খুব দরকার এটা । 

আমরা এখনও জাভাস্ক্রিপ্ট ভেরিয়েবল ঘোষণার পদ্ধতি অনুসরণ করতে পারি এবং টাইপস্ক্রিপ্ট কম্পাইলার ভেরিয়েবলের ডেটা টাইপ অনুমান করতে পারে।

উদাহরণ: টাইপ Annotation অফ প্যারামিটারস

function display(id:number, name:string)

{

    console.log(“Id = ” + id + “, Name = ” + name);

}

একইভাবে, আমরা অবজেক্টের প্রতিটি বৈশিষ্ট্যের জন্য ইনলাইন টিকা সহ একটি অবজেক্ট ঘোষণা করতে পারি।

উদাহরণ: টাইপ Annotation ইন অবজেক্ট

var employee : { 

    id: number; 

    name: string; 

}; 

employee = { 

  id: 100, 

  name : “John”

}

এখানে আমরা দুটি সংখ্যার আইডি এবং নাম সহ যথাক্রমে ডেটা টাইপ নম্বর এবং স্ট্রিং সহ একটি অবজেক্ট employee  ঘোষণা করি।

আপনি যদি আইডিতে একটি স্ট্রিং মান নির্ধারণের চেষ্টা করেন তবে টাইপস্ক্রিপ্ট কম্পাইলার নিম্নলিখিত এররটি দেবে।

error TS2322: Type ‘{ id: string; name: string; }’ is not assignable to type 

‘{ id:number; name: string; }’.Types of property ‘id’ are incompatible.

Type ‘string’ is not assignable to type ‘number’.

The post টাইপস্ক্রিপ্ট – টাইপ Annotation first appeared on Bipon's Diary.

আমরা লেগো টুকরাগুলির মতো অ্যাংগুলার কম্পোনেন্টগুলির কথা ভাবতে পারি। আমরা একবারে একটি কম্পোনেন্ট তৈরি করি তবে সেগুলি আমাদের ওয়েবসাইটের বিভিন্ন অংশে একাধিকবার ব্যবহার করতে পারি।

একটি অ্যাংগুলার  অ্যাপ্লিকেশন একটি গাছের কাঠামো যা আমরা তৈরি সেই সমস্ত কম্পোনেন্টগুলিকে নিয়ে গঠিত, যেমন আমরা কীভাবে ছোট লেগো টুকরো থেকে লেগো স্ট্রাকচার তৈরি করি।

কম্পোনেন্ট গুলিএকটি অ্যাংগুলার অ্যাপ্লিকেশনটির সর্বাধিক প্রাথমিক ইউআই(UI) বিল্ডিং ব্লক। একটি অ্যাংগুলার অ্যাপ্লিকেশনটিতে অ্যাংগুলার কম্পোনেন্টগুলির একটি গাছ থাকে — অ্যাংগুলার  অফিসিয়াল ডক্স

সুতরাং এটি মূলত একটি অ্যাংগুলার কম্পোনেন্ট যা, কিন্তু এটি সমস্ত নয়। এই আর্টিকেলে, আপনি নিম্নলিখিত প্রশ্নের উত্তর পাবেন:

• একটি কম্পোনেন্টের কাজগুলি কী কী?
• একটি কম্পোনেন্টের ভিতরে কি?
• কোন কম্পোনেন্ট কীভাবে কাজ করে?
• এনজিওনিট (ngOnInit?) কী?

একটি কম্পোনেন্টের কাজগুলি

কোন কম্পোনেন্টের প্রধান কাজগুলি হ’ল:

• ইন্টারপোলেশন (Interpolation), দিকনির্দেশক(Directives) এবং পাইপের(Pipes) সহায়তায় একটি নির্দিষ্ট পেজ / বিভাগ এবং এর ডেটা প্রদর্শন করা হচ্ছে
• মডেল এবং ভিউগুলির মধ্যে বাইন্ডিং ডেটা

একটি কম্পোনেন্টের ভিতরে কি?

একটি কম্পোনেন্টে রয়েছে (বেশিরভাগ) 3 টি অংশ:

• টেমপ্লেট ফাইল- এইচটিএমএল ভিউ
• টাইপস্ক্রিপ্ট ফাইল – মডেল
• স্টাইল ফাইল – সিএসএস

ফোল্ডার (অ্যাপ) হ’ল আমাদের কম্পোনেন্ট ফোল্ডার, এতে এইচটিএমএল, সিএসএস এবং টিএস ফাইল রয়েছে।  spec.ts পরীক্ষার জন্য এবং আপনি আপাতত module.ts উপেক্ষা করতে পারবেন।

সুতরাং প্রতিটি কম্পোনেন্টর নিজস্ব HTML কাঠামো, স্টাইল (সিএসএস) এবং ফাঙ্কশনালিটি (TS) আছে। কিন্তু কোন কম্পোনেন্ট আসলে কীভাবে কাজ করে?

একটি অ্যাংগুলার অ্যাপ তৈরি করার সময় আমাদের ফোল্ডারগুলির সাবধানতার সাথে নাম দেওয়া উচিত, অন্যথায়, আমরা একটি বড় প্রজেক্টর ভিতরে হারিয়ে যাব।

কোন কম্পোনেন্ট কীভাবে কাজ করে?

ঠিক আছে, উত্তরটি app.componal.ts এর ভিতরে রয়েছে:

আমাদের এখানে একটি সাধারণ টাইপস্ক্রিপ্ট ক্লাস রয়েছে। তবে এটি একটি কম্পোনেন্ট হিসাবে ব্যবহার করার জন্য:

প্রথমত, আমরা @angular/core লাইব্রেরি থেকে কম্পোনেন্টটি ইম্পোর্ট করি, যাতে আমরা একটি অ্যাংগুলার  কম্পোনেন্ট তৈরি করতে পারি

@Component decorator টিএস ক্লাসটিকে একটি কম্পোনেন্ট হিসাবে চিহ্নিত করে এবং আমাদের নীচের মেটাডেটা যুক্ত করতে দেয়

selector হ’ল এইচটিএমএল ট্যাগ হিসাবে প্রজেক্টর অন্যান্য এইচটিএমএল ফাইলের অভ্যন্তরটিকে কল করার জন্য: <app-root> </app-root>

TemplateUrl  যেখানে কম্পোনেন্টটির এইচটিএমএল ভিউ রয়েছে।

style URLs (1 টির বেশি হতে পারে) যেখানে কম্পোনেন্টটির স্টাইল সিএসএস থাকে।

অবশেষে, আমরা ক্লাসটি (কম্পোনেন্ট) এক্সপোর্ট করি যাতে আমরা এটিকে app.module অ্যাপ্লিকেশনটির মধ্যে কল করতে পারি অথবা প্রোজেক্টর অন্য কোন জাইগাতে ব্যবহার করতে পারি ।  

সুতরাং এই পদক্ষেপগুলি একটি অ্যাংগুলার  কম্পোনেন্ট তৈরি করে। এখন দেখা যাক কীভাবে এটি ব্যবহার করবেন…

উপাদান তৈরি করার পরে, আমাদের অবশ্যই এটি declarations এর অধীনে App Module মধ্যে সংরক্ষণ করতে হবে:

অবশেষে, আমরা কম্পোনেন্টটির selector name  কল করতে পারি এবং তারপরে আমাদের ওয়েবপেজে এটি দেখতে সক্ষম হওয়া উচিত:

যেহেতু অ্যাঙ্গুলার একটি মডিউলার ফ্রেমওয়ার্ক, তাই প্রতিটি কম্পোনেন্ট, সার্ভিস এবং অন্যান্য অ্যাঙ্গুলারের  বৈশিষ্ট্যগুলি অ্যাপ মডিউল (App Module) (বা একটি কাস্টম মডিউল) এর মধ্যে সংরক্ষণ করতে হবে, তাই আমরা এগুলি প্রজেক্টর যে কোনও জায়গায় ব্যবহার করতে পারি।

একটু কম্পোনেন্ট জন্য এত প্রচেষ্টা?

চিন্তা করবেন না, এই সমস্ত পদক্ষেপগুলি অ্যাংগুলার  সিএলআই (CLI) দ্বারা স্বয়ংক্রিয়ভাবে করা যেতে পারে, তবে প্রয়োজন হলে আপনি নিজেই এগুলি সম্পাদনা করতে পারেন।

এনজিওনিট কী?

ঠিক আছে, এখন আপনি কীভাবে একটি কম্পোনেন্ট  তৈরি করবেন তা শিখলেন। আপনি যখন একটি নতুন কম্পোনেন্ট  তৈরি করবেন, আপনি বুঝতে পারবেন যে এনজিওএনইনিট () নামের একটি পদ্ধতি কন্সট্রাক্টরের  নীচে উপস্থিত হবে:

প্রতিটি কম্পোনেন্টর একটি লাইফ সাইকেল আছে। ngOnInit() মেথডটি অ্যাঙ্গুলার কম্পোনেন্ট ইমমেডিয়েটলি শেষ করার সাথে সাথে ডাকা হয়। অন্য কথায়, অ্যাঙ্গুলার  আমাদের বলছে যে “কম্পোনেন্ট প্রস্তুত”।

আমরা ngOnInit () মেথডটির অভ্যন্তরে কী করতে পারি তা হ’ল কিছু ক্রিয়াকলাপ যেমন ডেটা আনার মতো, বা অন পেজ লোডে আমরা তত্ক্ষণাত দেখতে চাই। কনস্ট্রাক্টরের ভিতরে এই ধরণের ক্রিয়াকলাপ করার পরামর্শ দেওয়া হয় না, সুতরাং এর পরিবর্তে আমাদের এনজিওএনট ( ngOnInit()) রয়েছে । 

অ্যাঙ্গুলারের ক্ষেত্রে, কনস্ট্রাক্টর কেবল ডিপেন্ডেন্সি ইনজেকশনের জন্য দায়ী হওয়া উচিত।

অ্যাঙ্গুলার  অফিসিয়াল নথি অনুসারে, আমাদের জন্য ngOnInit() মেথডটি প্রয়োজন:

1. To perform complex initializations shortly after construction.
2. To set up the component after Angular sets the input properties.

কোনও ngOnInit()  কোনও কম্পোনেন্টটির প্রাথমিক ডেটা আনার জন্য একটি ভাল জায়গা। – অ্যাঙ্গুলার  অফিসিয়াল ডক্স

আরও তথ্যের জন্য আপনি এখানে এবং এখানেও দেখতে করতে পারেন।

অ্যাঙ্গুলার শেখার একটি বড় পদক্ষেপ হ’ল কম্পোনেন্ট কীভাবে তৈরি করতে হয় এবং দক্ষতার সাথে সেগুলি ব্যবহার করতে হয় তা জেনে রাখা।  আপনার যদি কোনও প্রশ্ন থাকে তবে মন্তব্য বিভাগে জিজ্ঞাসা করতে দ্বিধা করবেন না।

আপনার সময় এবং সহায়তার জন্য আপনাকে ধন্যবাদ!

The post অ্যাঙ্গুলার 7 কম্পোনেন্ট তৈরি ও ব্যবহার করবেন কীভাবে? first appeared on Bipon's Diary.

Interpolation is a way angular use to display variables inside your HTML using the curly braces. You can display variables, named. Name <b>name<b> using {{name}} 

You can bind the data from the class to the template

1. Bind data using double curly bracket

{{property_name}} → there is class property name here. Then showing dynamic value. 

2. Using expression 

<h2>{{2+2}}</h2>  → output: 4

3. Also concatenation + property name 

concatenation: <p>{{“welcome ” + name}}</p>

<p>{{name.length}}</p>

<p>{{name.toUpperCase()}}</p>

4. Using method

<p>{{greetUser()}}</p>

5. Alternate way 

public siteUrl = window.location.href;

<p>{{siteUrl}}</p>

Not possible: 

<p>{{a = 2+2}}</p> (You can not assign the expression in a variable. So assignment is not possible in a variable)

<p>{{window.location.href}}</p> (so template is not aware javascript global variable)

The post Day 3 – Interpolation first appeared on Bipon's Diary.

ইউজার টেমপ্লেট (template) এ ডাটা বাইন্ড করতে পারে ক্লাস (Class) থেকে –  

1. বাইন্ড ডাটা ডাবল কারলি ব্রাকেট ব্যবহার করে 

{{property_name}} → ডাবল কারলি ব্রাকেট এর মধ্যে ক্লাস প্রপার্টি নাম থাকবে । তাহলে ডাইনামিক ভ্যালু দেখাবে । 

2. ইউজিং সিনটেক্স

<h2>{{2+2}}</h2>  → output: 4 

3. স্ট্রিং কংক্যাটেনশন + প্রপার্টি নাম  

concatenation: <p>{{“welcome ” + name}}</p>

<p>{{name.length}}</p>

<p>{{name.toUpperCase()}}</p>

4. ইউজিং মেথড 

<p>{{greetUser()}}</p>

কম্পোনেন্ট ফাইল

greetUser(){

Return “Hello ” + this.name; 

}

5.অন্য ভাবে

public siteUrl = window.location.href;

<p>{{siteUrl}}</p>

Not possible: 

<p>{{a = 2+2}}</p> ভ্যারিয়েবল এ এক্সপ্রেশন এসাইন করা যাবে না । ব্রাউজার এর কনসোলে দেখাবে – Template parse error. 

<p>{{window.location.href}}</p> টেমপ্লেট  জাভাস্ক্রিপ্ট গ্লোবাল ভ্যারিয়েবল বুঝে না । ব্রাউজার এর কনসোলে দেখাবে – location of undefined. 

possible:

#<p>{{siteUrl}}</p> (public siteUrl = window.location.href)

The post দিন ৩– ইন্টারপোলেশন first appeared on Bipon's Diary.

Framework to build client side application

Great for SPAs

# Why

Modular approach

Re-usable code

Development quicker and easier (like validation, routing)

Unit testable and easily maintainable code

Google + Microsoft product (Angular + Typescript)

# Angular’s History

2010 – AngularJS

2016 – Angular version 2. Just called Angular

2016 Dec – Angular version 4

2017 Nov – Angular version 5

2018 Oct – Angular version 7

Day1 – Basic Functioning 

Prerequisites – to learn Angular

• HTML, CSS, JS
• Basic of Typescript

Development Environment: 

• Node – https://nodejs.org/en/
• Node Version check – node -v
• NPM (npm install -g. Check = npm -v)
• Angular CLI (npm install -g @angular/cli)
• CLI version check (ng -v)
• Text Editor like VS Editor

 New project creation 

• Open your Git bash interface and then write bellow command 

• ng new project_name (ng new hello-world) 

#way 2

VS Editor

• View >> Integrated Terminal >> ng new hello-world
• Going to project – cd hello-world
• Run the project – ng serve
• After compile successfully 
• Then going to browser localhost:4200

Module

• First building block is a Module

• Angular application is collection individual module
• Angular must have on module Root Module – AppModule
  • Module have two things
  • Component (Root component – AppComponent)
  • Service – Here have business logic
• Export and Import (interact and ultimately render the view in the browser)

Component

• Angular must have on component Root component – AppComponent 
  • Component have two things
  • HTML Template (To represent the view)
  • Class (View logic – control the particular logic)

Service 

• Module 
  • Service under Module 
  • Service there write business logic of your application 

Architecture Summary 

• Angular app – one or more modules
• Module – one or more components and services
• Components – HTML (contain the html template) + Class (class control the logic for the particular view )
• Service – Business Logic (contains the business logic)
• Modules interact and ultimately render the view in the browser 

Package.json

• This file contains the dependency & the dev dependency that are required for angular application 
• Project run – ng serve or npm start (npm start means internally call ng serve)

Main.ts 

• This is the entry point to the application 
• If run the ng serve command then application come to main.ts file then bootstrap and kickstart appModule → bootstrap appComponent. And appComponent (have two things HTML template + class (contains the data for particular view logic)
• ) and render the HTML.  Initially class have title property sync/bound with component html by interpolation. Also other html is static 

App.module.ts: 

• This is the main module for any angular application. Also app.component.ts file is the root component of angular application 

Operation flow: 

• When we run the command ng serve into git bash then execution comes to main.ts file . then goes to app.module.ts file. then bootstrap: [AppComponent] 
• Then goes to app.component 
• Then data property title gets render in the app.component.html 
•  AppComponent have two things
  • Html file
  • Component – (contain class >  to control the view logic)

The post Day 1 – Basic Functioning first appeared on Bipon's Diary.