Forem: Moussa

LinkedIn API Python Library

Moussa — Mon, 18 Jul 2022 16:41:53 +0000

Linkedin is an influential business-related social networking platform, which allows people from different places, cultures, and industries to create and expand their networks, so LinkedIn is one of the important tools inside any success bag.

Professional Organizations and Employees also today consider Linkedin as the main social platform for their business, the organization uses LinkedIn to find talented people and talented people take care of their profiles and activities to be found by the best organization.

To Make all of these easy and fast for both organizations and employees there are a lot of tools that collaborate with Linkedin APIs and get you back with the outcome in a few seconds one of these tools is Linkedin Python API let's deep dive into it!

Table of contents 📒

What is LinkedIn Python API? ❓
Getting Started ▶️
Fetching Profile Details ℹ️
Connections Management 🌐
Retrieve and Reply Messages 💬
What's next? ⏭

What is Linkedin Python API? ❓

A Python wrapper for the Linkedin API, that helps you to interact with LinkedIn APIs from your own scripts to make a variety of stuff like sending messages, search profiles, getting jobs, and more. the fanciest part is all that you need is just a regular LinkedIn account, without creating an official LinkedIn app.

Before using this project, please consult Terms and Conditions and Legal Notice.

Getting Started ▶️

⚠️ Python >= 3.6 required

Check python installation.

To install the package run the following command:

pip3 install linkedin-api

Example usage

from linkedin_api import Linkedin

# Authenticate using any Linkedin account email and password
try:
    api = Linkedin('me@mail.com', 'password')
    profile = api.get_profile('muhammedmoussa')
    print(profile)
except:
  print("An exception occurred")

Sample response of profile fetch.

{
  "summary": "...",
  "industryName": "Financial Services",
  "lastName": "Moussa ✪",
  "address": "Hurghada, Egypt",
  "locationName": "Egypt",
  "student": false,
  "geoCountryName": "Egypt",
  "geoCountryUrn": "urn:li:******",
  "geoLocationBackfilled": false,
  "elt": false,
  "birthDate": {},
  "industryUrn": "urn:li:fs_industry:43",
  "firstName": "Muhammed ",
  "entityUrn": "urn:li:fs_profile:ACoAABT1wOkBUgS77T0NG2puPbStCWKVLIJHUaE",
  "geoLocation": {},
  "geoLocationName": "Hurghada, Al Bahr al Ahmar",
  "location": {},
  "headline": "JavaScript Developer at Paymob",
  "displayPictureUrl": "https://media-exp2.licdn.com/dms/image/C5603AQHwEFZkUOXalw/profile-displayphoto-shrink_",
  "img_100_100": "100_100/0/1647527431537?e=1663804800&v=beta&t=ILGlsVPFkYE6ScB9IXx8JX1o5j4SqVCFGVRlKgPPpmg",
  "img_200_200": "200_200/0/1647527431537?e=1663804800&v=beta&t=VfEVqlmBJPPgan1tBguYDmRHPTTHSgcY83fSp7GNd-E",
  "img_400_400": "400_400/0/1647527431537?e=1663804800&v=beta&t=zN_GOz0Y4PG3ZZMa2xqpNAyg704CE5qkP-_m-wyBl3w",
  "img_800_800": "800_800/0/1647527431537?e=1663804800&v=beta&t=k7971X7dfIT-iY-Ng0QNuInX74BhahiRviMyZESBW8w",
  "profile_id": "ACoAABT1wOkBUgS77T0NG2puPbStCWKVLIJHUaE",
  "profile_urn": "urn:li:fs_miniProfile:ACoAABT1wOkBUgS77T0NG2puPbStCWKVLIJHUaE",
  "member_urn": "urn:li:member:351650025",
  "experience": [],
  "education": [],
  "languages": [],
  "publications": [],
  "certifications": [],
  "volunteer": [],
  "honors": [],
  "projects": []
}

Fetching Profile Details ℹ️

The package has a set of magical methods to interact with LinkedIn profile details, in addition to get_profile() method mentioned above, here is a list of some of these methods below.

from linkedin_api import Linkedin

try:
    api = Linkedin('me@mail.com', 'password')

    # Getting profile skills using Linkedin public profile id
    skills = api.get_profile_skills('muhammedmoussa')
    print(skills)

    # Getting profile contact info using Linkedin public profile id
    contact_info = api.get_profile_contact_info('muhammedmoussa')
    print(contact_info)

    # Getting profile badges using Linkedin public profile id
    badges = api.get_profile_member_badges('muhammedmoussa')
    print(badges)

except:
  print("An exception occurred")

For a better vision of the plugin, here is a sample response of these methods.

// skills
[
  {"name": "JavaScript"},
  {
    "name": "TypeScript",
    "standardizedSkillUrn": "urn:li:fs_miniSkill:50517",
    "standardizedSkill": {
      "name": "TypeScript",
      "entityUrn": "urn:li:fs_miniSkill:50517"
    }
  },
  {"name": "Node.js"},
  {"name": "MongoDB"},
  {"name": "Python"},
  ...
]

// contact_info
{
   "email_address":"muhammedmoussa@hotmail.com",
   "websites":[
      {
         "url":"https://muhammedmoussa.github.io/",
         "label":"PERSONAL"
      }
   ],
   "twitter":[
      {
         "name":"muhammedMoussa",
         "credentialId":"urn:li:member:351650025;345345825"
      }
   ],
   ...
}

// badges
{
   "premium":false,
   "influencer":false,
   "entityUrn":"urn:li:fs_memberBadges:******",
   "openLink":false,
   "jobSeeker":false,
   "$type":"com.linkedin.voyager.identity.profile.MemberBadges"
}

Connections Management 🌐

The package also has a set of magical methods to manage and control different network connections stuff as adding, unfollowing, or removing existing connections, retrieving, and accepting invites, also here is a list of some of these methods below.

from linkedin_api import Linkedin

try:
    api = Linkedin('me@mail.com', 'password')

    # Send connection request to a given profile id, will return a boolean.
    api.add_connection('muhammedmoussa')

    # Remove a connection with a given profile id, will return a boolean.
    api.remove_connection('muhammedmoussa')

    # Fetch connection invitations for the currently logged in user with start and limit params.
    invitations = api.get_invitations(start=0, limit=3)
    print(invitations)

    # Unfollow a given profile id, will return a boolean.
    api.unfollow_entity('muhammedmoussa')

except:
  print("An exception occurred")

Sample response of invitations fetch.

[
  {
    "mailboxItemId": "*******",
    "toMemberId": "*******",
    "fromMember": {
      "memorialized": false,
      "firstName": "Muhammed ",
      "lastName": "Moussa",
      "entityUrn": "urn:li:fs_miniProfile:******",
      "publicIdentifier": "muhammedmoussa",
      "trackingId": "P8mZOe9HRLO5L84xOoN16g=="
    },
    "invitee": {},
    "invitationType": "PENDING",
    "entityUrn": "urn:li:fs_relInvitation:6954589454917320704",
    "toMember": {},
    "inviterActors": [],
    "sentTime": 1658103366339,
    "customMessage": false,
    "sharedSecret": "******",
    "unseen": true
  }
]

Retrieve and Reply Messages 💬

Finally, the package also has a set of magical methods to deal with conversation stuff such as messages retrieving and sending, here is a list of some of these methods below.

from linkedin_api import Linkedin

try:
    api = Linkedin('me@mail.com', 'password')

    # Fetch list of conversations logged in user. return list.
    conversations = api.get_conversations()
    print(conversations)

    # Fetch conversation (message thread) details for a given LinkedIn profile. return dictionary.
    api.get_conversation_details('urn:li:fs_miniProfile:********')

    # Send a message to a given conversation. return boolean
    api.send_message('Hello There!', 'urn:li:fsd_conversation:********')

    # Send `seen` to a given conversation. return boolean.
    mark_conversation_as_seen('urn:li:fsd_conversation:********')

except:
  print("An exception occurred")

Sample response of conversations fetch.

{
  "metadata": {
    "unreadCount": 0
  },
  "elements": [
    {
      "dashEntityUrn": "urn:li:fsd_conversation:*****",
      "notificationStatus": "ACTIVE",
      "read": true,
      "groupChat": false,
      "totalEventCount": 2,
      "unreadCount": 0,
      "lastActivityAt": 1658148419804,
      "firstMessageUrn": "urn:li:fs_event:(*****,2-MTY1ODEwNDYyNzczOGI4ODE2Mi0wMDQmY2I0M2UwZDctZmM5ZS00NmY0LTg3OWQtNGVhMGIyYzgxZmM1XzAxMw==)",
      "backendUrn": "urn:li:messagingThread:*****",
      "receipts": [
        {
          "fromEntity": "urn:li:fs_miniProfile:******",
          "seenReceipt": {
            "seenAt": 1658148419629,
            "eventUrn": "urn:li:fs_event:(*****,******)"
          },
          "fromParticipant": {
            "string": "urn:li:member:351650025"
          }
        }
      ],
      "lastReadAt": 1658148672641,
      "archived": false,
      "blocked": false,
      "entityUrn": "urn:li:fs_conversation:*****",
      "sdkEntityUrn": "urn:li:msg_conversation:(urn:li:fsd_profile:******,*****)",
      "viewerCurrentParticipant": true,
      "featureTypes": [],
      "withNonConnection": false,
      "muted": false,
      "events": [
        {
          "createdAt": 1658148419796,
          "reactionSummaries": [],
          "dashEntityUrn": "urn:li:fsd_message:******",
          "quickReplyRecommendations": [],
          "entityUrn": "urn:li:fs_event:(*****,******)",
          "eventContent": {
            "com.linkedin.voyager.messaging.event.MessageEvent": {
              "messageBodyRenderFormat": "DEFAULT",
              "body": "",
              "attributedBody": {
                "text": "How are you?"
              }
            }
          },
          "subtype": "MEMBER_TO_MEMBER",
          "from": {
            "com.linkedin.voyager.messaging.MessagingMember": {
              "miniProfile": {
                "memorialized": false,
                "firstName": "Muhammed ",
                "lastName": "Moussa ✪",
                "dashEntityUrn": "urn:li:fsd_profile:******",
                "entityUrn": "urn:li:fs_miniProfile:******",
                "backgroundImage": {},
                "publicIdentifier": "muhammedmoussa",
                "picture": {},
                "trackingId": "gHcY3a/hRK6s0z/HDf7cTg=="
              },
              "entityUrn": "urn:li:fs_messagingMember:(*****,******)",
              "nameInitials": "MM"
            }
          },
          "previousEventInConversation": "urn:li:fs_event:(*****,2-MTY1ODEwNDczMDM3OWIyMzUzMi0wMDQmY2I0M2UwZDctZmM5ZS00NmY0LTg3OWQtNGVhMGIyYzgxZmM1XzAxMw==)",
          "backendUrn": "urn:li:messagingMessage:******"
        }
      ],
      "participants": []
    }
  ],
  "paging": {
    "count": 20,
    "start": 0,
    "links": []
  }
}

You maybe notice some different in parameters here instead of passing URLs we passing urn, this leads to one of the most important key concepts here URN IDs and public IDs.

URN ID: A Uniform Resource Name (URN) is a Uniform Resource Identifier (URI) that uses the urn scheme. URNs are globally unique. example of LinkedIn profile URN: urn:li:fs_miniProfile:ACoAABQ11fIBQLGQbB1V1XPBZJsRwfK5r1U2Rzt
URL: A Uniform Resource Locator (URL), colloquially termed a web address, is a reference to a web resource that specifies its location on a computer network. example of LinkedIn profile URL: https://www.linkedin.com/in/muhammedmoussa/

For more information about this and how the package works with LinkedIn APIs check LinkedIn API docs.

What's next? ⏭

We walked through the LinkedIn Python API package and some of its features, as we mentioned above how important is LinkedIn as a tool for every professional especially the organization when wailing to upgrade the traditional job posting, talent hunting, or hiring process in general. so today we have a bunch of tools that work on top of LinkedIn or people data and offer great tools that can change the game. here is a list of some of the services:

Proxycurl by Nubela
LinkDB
LinkedIn API

Clean up your HTML with ES6 Modules

Moussa — Sun, 25 Apr 2021 14:46:44 +0000

if you are that person who is working with the web regardless of the role how you doing it, maybe for your WordPress site, a simple static website or you are a backend or full-stack developer and working with Javascript inside HTML files with code in tags, so this post for you.

Modularity is one of the main factors of any solid software to make it more efficient, reusable, and maintainable. if you are coming from any programming language you probably know about modules or classes sharing ways import, module, use, #include etc.

But when it comes to JavaScript this language that written inside a <script> tag in HTML file bunch of people thinking about just doing the job making some animation or add a third-party plugin to the website with zero modularity consideration and crowdy HTML files, so let's get started! 🔥

How HTML file looks

<body>
    <script>
        // function doAnimationForMe() {}
        // function doScrollToTopForMe()
    </script>
    <script>
        // function doFirebaseIntegrationForMe() {}
        // function danceWithMe()
    </script>
</body>

let's focus on <body> content only, and imaging DRY some of these little functions on multiple HTML files and think about HTML file length one last imaging if you want to update something or doing another dance so yeah here we go and will work through all HTML pages again over and over.

Creating Javascript module

Yes, that's possible, js will not fight you, with newly introduced ES6 keywords import and export you can encapsulate the module. regardless of the other benefits of working with modules. so now we are just focused on making the HTML file more cleaner.

As example lets grap doAnimationForMe() from the HTML file, and create animation.js

const time = 1000

function start() { /* ..... */ }

function end() { /* ..... */ }

function doAnimationForMe() { 
  start()
  setTimeOut(function() {
    end();
  }, time)
}

same code from the HTML file but in an isolated, manipulated, and reusable zone.

Modules Export and Import

Great its a time to making our pretty code modular ready. there are variant ways of export, default, named, and aggregation. let's find out. another feature of the module if we planning to use this doAnimationForMe() at another js files or only include this module to the HTML page that we can export all functions in the file or just doAnimationForMe() function only.

let's start with the Named export

export const time = 1000

export function start() { /* ..... */ }

export function end() { /* ..... */ }

export function doAnimationForMe() { 
  start()
  setTimeOut(function() {
    end()
  }, time)
}

in this way all animation staff exported can be imported later. another tip if you plan to export multiple stuff from one module,

const time = 100

function start() { /* ..... */ }

function end() { /* ..... */ }

function doAnimationForMe() { 
  start()
  setTimeOut(function() {
    end()
  }, time)
}

export {start, end, doAnimationForMe}
// shorthand for {start: start, end: end, doAnimationForMe}

also can export only doAnimationForMe() function and make the module more logical, just flag desired part by export or follow the export object tip.

// Code......
export {doAnimationForMe}

Another tip: since we are talking about the named export we can also cast names, till now if we will import doAnimationForMe we have to use the same name doAnimationForMe or will cause an error. for rename exported part:

export {doAnimationForMe as useAnimation}

let's create another pseudo module sample that gets data from API then applying some animation, for the whole picture drawing, creating an api.js file.

const url = '/api/item'

export function getAllItems() {
  return new Promise(function (resolve, reject) {
    fetch(url)
      .then(function (response) {
        resolve(response)
      })
      .catch(function (error) {
        reject(error)
      })
  })
}

Module import and reuse

Yeah, let's have some fun and put it all together creating an app.js file.

import {doAnimationForMe} from './animation.js' // The relative path.
import {getAllItems} from './api.js' // The relative path.

// Another Code...
function renderUi(items) {
  // Render items in the ui
}

function handleError(err) {
  // Handle the error
  console.error(err)
}

getAllItems().then(function(data) {
  renderUi(data)
  doAnimationForMe()
}).catch(function(err) {
  handleError(err)
})

window.addEventListener('load', getAllItems())

Adding Module into `HTML` page

it's the time to cleanup the HTML file and include only our encapsulated module, with only one line consider relative paths also :

<!DOCTYPE html>
<html>
<head>
    <!-- Code... -->
</head>
<body>
    <!-- Code... -->
    <script src="./app.js"></script>
</body>
</html>

The difference is clear now how clean it our HTML but, for the first time properly you will get a nice error!

Uncaught SyntaxError: Cannot use import statement outside a module

Actually no. it's the trick not kidding but we have to include one last attribute to our script tag which is the type="module"

so after a little update, the code will look like this:

<script src="./app.js" type="module"></script>

the error will go and now we can confirm that our modules all loaded into the HTML page by checking the network tab:

for further reading and it's very important also to check the browser compatibility for this feature with your project or the client devices.
JavaScript Modules -MDN

another way to doing the same job is default export there is no much difference but just in case you don't care about names and want to export some functionality from the module without a specific name in import, it also's good to avoid naming errors. let's see the same example but in default export.

animation.js

const time = 1000

function start() { /* ..... */ }

function end() { /* ..... */ }

export default function doAnimationForMe() { 
  start()
  setTimeOut(function() {
    end()
  }, time)
}

api.js

const url = '/api/item'

function getAllItems() {
  return new Promise(function (resolve, reject) {
    fetch(url)
      .then(function (response) {
        resolve(response)
      })
      .catch(function (error) {
        reject(error)
      })
  })
}

export default getAllItems
// same but, in another way...

the most interesting part here at import in app.js:

import doAnimation from './animation.js'
import kofta from './api.js'

// Another Code...
function renderUi(items) {
  // Render items in the ui
}

function handleError(err) {
  // Handle the error
  console.error(err)
}

kofta().then(function(data) {
  renderUi(data)
  doAnimation()
}).catch(function(err) {
  handleError(err)
})

window.addEventListener('load', getAllItems())

that's will do the same job but in a simplified way.

Consolusion

The goal of this post is to simplify working with modules also encouraging you to write clean HTML pages focused only on markup, and keep JavaScript files isolated too like CSS with the benefit of modularity at the functionality code on your website. ES6 import and export also have a bunch of tips and tricks that's can make life easier also the third way mentioned before aggregation export. I just mentioned some basics.

Control angular forms in just functions 🔥

Moussa — Fri, 11 Dec 2020 18:54:06 +0000

Forms are an important concept to be covered and controlled in the client-side development... in the previous article, I talked about forms in angular and how to manage them easily with Rxjs.

Hack Angular Forms With Rxjs 🔥

Moussa ・ Jul 17 '20 ・ 5 min read

#angular #typescript #html

Idea:

keep it simple is a concept, we will use only angular two-way data binding connected with only functions and component props in a functional way. no more template-driven, reactive forms or even observable forms :D

Note: this pattern can be useful in small static forms.

we will be going with pseudocode for HTML and component coverage and the full code with demo will be included. let's start!

Component Goal:

let's assume that we have a user form component as pice of our app and we planned to reuse it so it will be declarative enough and prevent its noise from parent components will render. here are some props and functions our component will need.

Component Ui:

the form is simple to keep the view part only focusing on UI stuff and CSS styling, with just inputs and a piece of banana in the box [()], with buttons eventually binding into the component class.

<div>
  <input [(ngModel)]="name" type="text">
  <input [(ngModel)]="active" type="checkbox">
  <button (click)="onSubmit()">Save</button>
  <button (click)="onReset()">Reset</button>
</div>

that's all that we need from our component view. no more logic noise clear or directives.

Functional part in component:

the place where the component view will dance, we need two main things only. variables or props which will act as form controls, and functions that are will handle form actions like submit and reset.

export class UserFormComponent {
  // controls 
  name = ''
  active = false

  onSubmit() {
    // collecting component data before submit. 
    const {name, age} = this
    const userData = {name, age}

    console.log(userData)
  }

  onReset() { 
    // component is clear again.
    this.name = '';
    this.active = false
  }
}

and that's it we have a simple clean component that will act as a solid piece from our greater app!

Bonus:

since we are building a solid re-usable component so we have to consider its communication channel with the other components. Yah. it needs to pass its data into the world and we can deal with that inside angular by event emitting via @Output(). actually, we almost need the form data when submitting the event but in some cases, we need to emit also reset events to the parent component for any reset stuff related to other components. let's implement both.

export class UserFormComponent {
  @Output() submit = new EventEmitter<object>()
  @Output() reset = new EventEmitter<any>()

  onSubmit() {
    // collecting component data before submit. 
    const {name, age} = this
    const userData = {name, age}

    console.log(userData)
    this.submit.emit(userData)
  }

  onReset() {
    this.reset.emit()
  }
}

another pro tip to validate our form before submit and again form logic will be inside it, not another place so let's validate before traveling to the parent component. in just function no more built-in or third-party validators.

export class UserFormComponent {
  onSubmit() {
    // validating component data before submit.
    if(!this.isValid()) { return }

    // ... submit code
  }

  private isValid(): boolean {
    // just required name and active. you can go with your validation logic and add another else if blocks.
    const {name, active} = this
    if(name && active) {
      return true
    } else {
      return false
    }
  }
}

Concolusion 🖐️

we discussed forms management tips for angular development by using built-in frameworks Data binding and event emitters. in a functional way, BUT this approach not Exclusive at angular think about it functional programming is heavily welcomed in javascript frameworks and the second part is a data binding is a behavior that another framework can offer like VueJs in v-model directive. and React in useState() hook. so this pattern may be useful at any js framework not only angular.

thought sharing is welcomed since all of that post is just a personal point of view through daily experience.

Github Repo
Live Demo
Find Me on Twitter

Hack Angular Forms With Rxjs 🔥

Moussa — Fri, 17 Jul 2020 17:18:21 +0000

Why Forms?

Forms are heavily used behavior inside your application you have to keep its values and validation rules under your custom control, in a simple easy way as you can. today we are going to talk about one tip for controlling forms in angular development. maybe change your life. 😵

Angular Forms

If you are like me working daily with angular at least right now, you probably used or heard about Reactive Forms and Template Driven Forms and the fighting about which one I have to use?

What the Tips!

before angular, you maybe were using HTML with JQuery forms, or redux forms if you are a React guy and so on.
since angular coming with Rxjs, so the tip is Observables not Reactive or TD Forms, yeah we will discuss how to manage the forms by only observables and data binding nothing more.

Observable Based Form

the simple idea is we have an observable at a form at the left-hand side and an observable at the right-hand side, and the process running on two data-binding, that's it!

No worries, we will walk through an example, let's start!
you know if you will use the reactive form approach you will need some configs at module level and dependencies at the component level, as an example:

app.module.ts

import {ReactiveFormsModule} from '@angular/forms';

@NgModule({
  declarations: [...],
  imports: [ReactiveFormsModule],
  bootstrap: [AppComponent]
})

form.component.ts

import {FormGroup, FormBuilder} from '@angular/forms';

export class UserFormComponent {
  userForm: FormGroup;

  // maybe OnInit instead, but it's okay we will never use 😋
  constructor(private fb: FormBuilder) {
    this.userForm = fb.group({
      // controls config
    })
  }

  updateform = () => {
     this.userForm.patchValue({
       // new data config
     });
  }

  resetForm = () => {
    this.userForm.reset();
  }

  getFormValues = (): object { 
    return this.userForm.value;
  }
}

and finally form.componnet.html

<form [formGroup]="userForm">
  <input formControlName="...">
  <input formControlName="...">
<form>

in the above example as you see modules, dependencies, and configs for the form, in addition to the extra utilities for the update, reset and get value stuff, get here can bu also submit which is at the end the place you get the data and play with it.
that's about the reactive forms approach as a reminder.

Another way can do it with TD Forms since I didn't like it so we will never mention it's an example!

ref: Angular TD Forms.

Now lets RX it!

all that we need is a service as a source of truth for our approach, and the components can work with, yeah COMPONENTS not only form component that's the power of observables and data streaming. 🚀
to be honest, you can do you can get form data at any parent component by template reference also, but let us go with pure state management at Rxjs. so our service something like this:

Note: you can find a complete example at Github.

state.service.ts

import {BehaviorSubject, Observable} from 'rxjs';

export class StateService {
  private userData$ = new BehaviorSubject<IUser>(new User());

  public setUserData = (userData: IUser) => this.userData$.next(userData);
  public getUserData = (): Observable<IUser> => this.userData$.asObservable();
  public resetUserData = () => this.userData$.next(new User());
}

let's explain our clear service, we have a BehaviorSubject observable which will load the data for the form component or any component again! 😎
and some utils for getting, set, and reset, actually you can remove get and set, by making the observable public and make your component pointer directly to that observable. I'll keep it clear. 🌚

let's move to our component, you will notice no modules or dependencies required for the process except our state service. and we will try to make our form contains different possible data types: string, number and boolean.

observable-form.component.ts

import {Observable} from 'rxjs';
import {StateService} from '../state.service';

export class ObservableFormComponent implements OnInit {
  userData$: Observable<IUser>;

  ngOnInit(): void {
    this.userData$ = this.stateService.getUserData();
  }

  onSubmit= () => {
    let data: any; 
    this.userData$.subscribe(user => data = user);
    console.log(data);
  }

  onReset= () => this.stateService.resetUserData();

  constructor(private stateService: StateService) { }
}

that's it! let's explain. what we have:

userData$ the component observable which will listen to the BehaviorSubject we initialized at state service for use in our component HTML and Typescript.
onReset: the utility responsible for reset data, maybe after the submit and getting Ok response from the API, or whatever!
onSubmit: again the place we collect the data (current observable value), you can use any Rxjs technique to fetch and again you can make the BehaviorSubject public and another option will be available to get the current data or make third util at service:

const data = this.stateService.userData$.value;
// or in service
public getCurrentUserData = (): IUser => this.userData$.value;

we will go with the current approach for now, and finally, the time to link all that we made by the view, in fact, we didn't make huge thing it simple, and you will find it simplest when usually use it.

observable-form.component.html:
Note: we will add examples of control just the shoot you say Ahaa!, you will find the complete example at Github repo.

<div *ngIf="(userData$ | async) && userData$ | async as user">
  <input [(ngModel)]="user.name" type="text">
  <input [(ngModel)]="user.active" type="checkbox">
  <button (click)="onSubmit()">Save</button>
  <button (click)="onReset()">Reset</button>
</div>

that's it, we are done now let your controls working with Rxjs and angular two data binding, you can catch a fresh copy of data instantly at HTML or your logic code, for example, you can bind HTML elements properties on your observable value, Yeah! 👻

<button [class]="user.age && user.age < 18 ? 'cursor-not-allowed': 'cursor-pointer'" (click)="onSubmit()">Save</button>

another HINT# 🎙️

as debugging you can do kind of this to catch whole picture and the power of what you made:

<p>Form Data</p>
<pre>{{ userData$ | async | json }}</pre>

Concolusion 🖐️

we discussed forms tips for angular development by using built-in frameworks tools, Rxjs, and Data binding. in a short straight forward way, BUT this approach not Exclusive at angular think about it Rxjs is an isolated package that you can use and the second part is a data binding (Two way for making controls instantly update the observable) is a behavior that another framework can offer like VueJs in v-model directive.
thought sharing is welcomed since all of that post is just a personal point of view through daily experience.

Github Repo
Live Demo
Find Me on Twitter

Forem: Moussa

LinkedIn API Python Library

Table of contents 📒

What is Linkedin Python API? ❓

Getting Started ▶️

Fetching Profile Details ℹ️

Connections Management 🌐

Retrieve and Reply Messages 💬

What's next? ⏭

Clean up your HTML with ES6 Modules

How HTML file looks

Creating Javascript module

Modules Export and Import

Module import and reuse

Adding Module into HTML page

Consolusion

Control angular forms in just functions 🔥

Hack Angular Forms With Rxjs 🔥

Moussa ・ Jul 17 '20 ・ 5 min read

Idea:

Component Goal:

Component Ui:

Functional part in component:

Bonus:

Concolusion 🖐️

Hack Angular Forms With Rxjs 🔥

Why Forms?

Angular Forms

What the Tips!

Observable Based Form

Now lets RX it!

another HINT# 🎙️

Concolusion 🖐️

Adding Module into `HTML` page